vue jumps to the third-party website and returns parameters after logging in

Vue.js is one of the most popular frameworks in front-end development. It provides an easy and efficient way to build interactive user interfaces. When developing web applications, you often need to interact with third-party websites, such as OAuth2 authorized login, Alipay payment, etc. These operations will jump to the third-party website, and then jump back to the original application after completing the operation. This article will discuss how to jump to a third-party website for login in Vue, and handle it accordingly when returning parameters.

Jump to a third-party website

First, we need to introduce a link to a third-party website in Vue. Typically, this link will have some parameters, such as redirect_uri, client_id, etc. used to identify the application and the redirect URI. Suppose we want to jump to http://example.com/login, we need to use the <a> tag to construct a link:

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

In this link , we used Vue template syntax to insert two parameters redirect_uri and client_id. These parameters need to be defined in advance and passed into the component.

Receive return parameters

When the user completes the operation on the third-party website, he will be redirected back to our application. During this process, the third-party website will add some parameters to the query string of the redirect link, such as code, state, etc. We need to extract and process these parameters to complete subsequent operations.

To process query strings in Vue, you can use the Query object of vue-router, which will automatically extract the URL query parameters and expose them to us as objects . Suppose we define the following route in the route:

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

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

We can get the return parameters through $route.query in the LoginCallback component:

<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>

In this example, we mount the code and state properties in $route.query to the component through the data method On the instance, v-if is used in the template to control the display based on whether the parameter exists. If the parameter exists, we display the corresponding value; if the parameter does not exist, nothing is displayed.

In actual development, we may need to perform some additional operations, such as submitting the authorization code to the server for verification, judging whether the operation is successful based on the status code in the parameters, etc. These operations can be completed in the component's life cycle hook function. For example, in the created hook function, we can use the axios library to submit the authorization code to the server:

<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>

In this example, we use axios The library sends a POST request to the server to request an access token. We package the authorization code, redirect URI, client ID, and client secret parameters in the POST request and handle them in the success and failure callback functions. In this way, we can easily complete the operation of jumping to the third-party website to log in and receive the return parameters in Vue.

Summary

In this article, we introduced how to jump to a third-party website for login in Vue and process it when returning parameters. We used template syntax to insert jump parameters and extract and process return parameters in the component. As a front-end developer, it is very important to understand how to interact with third-party websites and handle return parameters. I believe that through the introduction of this article, you have been able to master this skill and apply it in actual development.

The above is the detailed content of vue jumps to the third-party website and returns parameters after logging in. For more information, please follow other related articles on the PHP Chinese website!