vue accède au site Web tiers et renvoie les paramètres après la connexion-Questions et réponses frontales-php.cn

vue accède au site Web tiers et renvoie les paramètres après la connexion

WBOY

Libérer： 2023-05-24 09:23:06

original

2099 Les gens l'ont consulté

Vue.js est actuellement l'un des frameworks les plus populaires en matière de développement front-end, offrant un moyen simple et efficace de créer des interfaces utilisateur interactives. Lors du développement d'applications Web, vous devez souvent interagir avec des sites Web tiers, tels que la connexion autorisée OAuth2, le paiement Alipay, etc. Ces opérations seront redirigées vers le site Web tiers, puis reviendront à l'application d'origine une fois l'opération terminée. Cet article explique comment accéder à un site Web tiers pour se connecter dans Vue et le gérer en conséquence lors du renvoi des paramètres.

Aller vers un site Web tiers

Tout d'abord, nous devons introduire un lien vers un site Web tiers dans Vue. Généralement, ce lien aura certains paramètres, tels que redirect_uri, client_id, etc. utilisés pour identifier l'application et l'URI de redirection. Supposons que nous voulions accéder à http://example.com/login, nous devons utiliser la balise <a> pour construire un lien : redirect_uri、client_id 等用于标识应用程序和重定向 URI 的参数。假设我们希望跳转到 http://example.com/login，我们需要使用 <a> 标签构造一个链接：

<template>
  <div>
    <a href="http://example.com/login?redirect_uri={{redirect_uri}}&client_id={{client_id}}">
      跳转到第三方网站
    </a>
  </div>
</template>

Copier après la connexion

在这个链接中，我们使用了 Vue 模板语法插入了两个参数 redirect_uri 和 client_id。这些参数需要事先定义并传入组件中。

接收返回参数

当用户完成第三方网站上的操作后，会被重定向回我们的应用程序。在这个过程中，第三方网站会在重定向链接的查询字符串中添加一些参数，例如 code、state 等。我们需要提取并处理这些参数，以完成后续的操作。

在 Vue 中处理查询字符串可以使用 vue-router 的 Query 对象，它会自动提取 URL 查询参数，并将它们作为对象暴露给我们。假设我们在路由中定义了以下路由：

import VueRouter from 'vue-router';
import LoginCallback from './components/LoginCallback.vue';

const router = new VueRouter({
  routes: [
    {
      path: '/login/callback',
      component: LoginCallback
    }
  ]
});

Copier après la connexion

我们可以在 LoginCallback 组件中通过 $route.query 来获取返回参数：

<template>
  <div>
    <p v-if="code">授权码: {{code}}</p>
    <p v-if="state">状态码: {{state}}</p>
  </div>
</template>

<script>
export default {
  name: 'LoginCallback',
  data() {
    return {
      code: this.$route.query.code,
      state: this.$route.query.state
    }
  }
}
</script>

Copier après la connexion

在这个示例中，我们通过 data 方法将 $route.query 中的 code 和 state 属性挂载到组件的实例上，并在模板中使用了 v-if 来根据参数是否存在来控制显示。如果参数存在，我们会显示相应的值；如果参数不存在，那么不会显示任何内容。

在实际开发中，我们可能还需要进行一些额外的操作，比如将授权码提交给服务器进行验证、根据参数中的状态码来判断操作是否成功等。这些操作可以在组件的生命周期钩子函数中完成。例如，在 created 钩子函数中，我们可以使用 axios 库将授权码提交给服务器：

<script>
  import axios from 'axios';

  export default {
    name: 'LoginCallback',
    created() {
      if (this.code) {
        axios.post('/oauth/token', {
          grant_type: 'authorization_code',
          code: this.code,
          redirect_uri: 'http://localhost:8080/login/callback',
          client_id: 'my_client_id',
          client_secret: 'my_client_secret'
        }).then(response => {
          console.log(response.data);
        }).catch(error => {
          console.log(error);
        });
      }
    },
    data() {
      return {
        code: this.$route.query.code,
        state: this.$route.query.state
      }
    }
  }
</script>

Copier après la connexion

在这个示例中，我们使用 axiosrrreee

Dans ce lien, nous avons utilisé la syntaxe du modèle Vue pour insérer deux paramètres redirect_uri et client_id. Ces paramètres doivent être définis à l'avance et transmis au composant.

Recevoir les paramètres de retour

Lorsque l'utilisateur termine l'opération sur le site tiers, il sera redirigé vers notre application. Au cours de ce processus, le site Web tiers ajoutera certains paramètres à la chaîne de requête du lien de redirection, tels que code, state, etc. Nous devons extraire et traiter ces paramètres pour effectuer les opérations ultérieures. 🎜🎜Pour traiter les chaînes de requête dans Vue, vous pouvez utiliser l'objet Query de vue-router, qui extraira automatiquement les paramètres de requête d'URL et nous les exposera en tant qu'objets. Supposons que la route suivante soit définie dans la route : 🎜rrreee🎜 Nous pouvons obtenir les paramètres de retour via $route.query dans le composant LoginCallback : 🎜rrreee🎜Dans cet exemple , nous montons les propriétés code et state dans $route.query sur l'instance du composant via les data méthode activée et utilisé v-if dans le modèle pour contrôler l'affichage en fonction de l'existence ou non du paramètre. Si le paramètre existe, on affiche la valeur correspondante ; si le paramètre n'existe pas, rien n'est affiché. 🎜🎜Dans le développement réel, nous devrons peut-être effectuer certaines opérations supplémentaires, telles que soumettre le code d'autorisation au serveur pour vérification, juger si l'opération a réussi en fonction du code d'état dans les paramètres, etc. Ces opérations peuvent être réalisées dans la fonction hook de cycle de vie du composant. Par exemple, dans la fonction hook created, nous pouvons utiliser la bibliothèque axios pour soumettre le code d'autorisation au serveur : 🎜rrreee🎜Dans cet exemple, nous utilisons axios code> La bibliothèque envoie une requête POST au serveur pour demander un jeton d'accès. Nous emballons les paramètres tels que le code d'autorisation, l'URI de redirection, l'ID client et le secret client dans la requête POST et les traitons respectivement dans les fonctions de rappel de réussite et d'échec. De cette façon, nous pouvons facilement terminer l'opération consistant à accéder au site Web tiers pour nous connecter et recevoir les paramètres de retour dans Vue. 🎜🎜Résumé🎜🎜Dans cet article, nous avons présenté comment accéder à un site Web tiers pour se connecter dans Vue et le traiter lors du renvoi des paramètres. Nous avons utilisé la syntaxe du modèle pour insérer des paramètres de saut et extraire et traiter les paramètres de retour dans le composant. En tant que développeur front-end, il est important de comprendre comment interagir avec des sites Web tiers et gérer les paramètres de retour. Je pense que grâce à l'introduction de cet article, vous avez pu maîtriser cette compétence et l'appliquer dans le cadre d'un développement réel. 🎜

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!