vue는 타사 웹사이트로 이동하여 로그인 후 매개변수를 반환합니다.

Vue.js는 현재 프런트 엔드 개발에서 가장 인기 있는 프레임워크 중 하나이며 대화형 사용자 인터페이스를 구축하는 쉽고 효율적인 방법을 제공합니다. 웹 애플리케이션을 개발할 때 OAuth2 인증 로그인, Alipay 결제 등 제3자 웹사이트와 상호 작용해야 하는 경우가 많습니다. 이러한 작업은 타사 웹사이트로 이동한 다음 작업 완료 후 원래 애플리케이션으로 다시 이동합니다. 이 글에서는 Vue에서 로그인을 위해 타사 웹사이트로 이동하는 방법과 매개변수를 반환할 때 그에 따라 처리하는 방법에 대해 설명합니다.

타사 웹사이트로 이동

먼저 Vue에 타사 웹사이트 링크를 도입해야 합니다. 일반적으로 이 링크에는 애플리케이션과 리디렉션 URI를 식별하는 데 사용되는 redirect_uri, client_id 등과 같은 일부 매개변수가 있습니다. http://example.com/login으로 이동하고 싶다면 <a> 태그를 사용하여 링크를 구성해야 합니다. 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>

在这个链接中，我们使用了 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
    }
  ]
});

我们可以在 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>

在这个示例中，我们通过 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>

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

여기서 링크, Vue 템플릿 구문을 사용하여 두 개의 매개변수 redirect_uri 및 client_id를 삽입했습니다. 이러한 매개변수는 미리 정의되어 구성 요소에 전달되어야 합니다.

반환 매개변수 수신

사용자가 제3자 웹사이트에서 작업을 완료하면 우리 애플리케이션으로 다시 리디렉션됩니다. 이 과정에서 제3자 웹사이트는 리디렉션 링크의 쿼리 문자열에 code, state 등과 같은 일부 매개변수를 추가합니다. 후속 작업을 완료하려면 이러한 매개변수를 추출하고 처리해야 합니다. 🎜🎜Vue에서 쿼리 문자열을 처리하려면 vue-router의 Query 개체를 사용하면 자동으로 URL 쿼리 매개변수를 추출하여 개체로 노출할 수 있습니다. 경로에 다음 경로가 정의되어 있다고 가정합니다. 🎜rrreee🎜 LoginCallback 구성 요소의 $route.query를 통해 반환 매개변수를 가져올 수 있습니다. 🎜rrreee🎜이 예에서는 , data를 통해 $route.query의 code 및 state 속성을 ​​구성 요소의 인스턴스에 마운트합니다. 메소드를 설정하고 템플릿에서 v-if를 사용하여 매개변수 존재 여부에 따라 표시를 제어했습니다. 매개변수가 존재하면 해당 값이 표시되고, 매개변수가 존재하지 않으면 아무것도 표시되지 않습니다. 🎜🎜실제 개발에서는 검증을 위해 인증 코드를 서버에 제출하거나 매개변수의 상태 코드를 기반으로 작업 성공 여부를 판단하는 등 몇 가지 추가 작업을 수행해야 할 수도 있습니다. 이러한 작업은 구성 요소의 수명 주기 후크 기능에서 완료될 수 있습니다. 예를 들어 created 후크 함수에서 axios 라이브러리를 사용하여 인증 코드를 서버에 제출할 수 있습니다. 🎜rrreee🎜이 예에서는 를 사용합니다. axios code> 라이브러리는 액세스 토큰을 요청하기 위해 서버에 POST 요청을 보냅니다. POST 요청에 인증 코드, 리디렉션 URI, 클라이언트 ID, 클라이언트 비밀 매개변수를 패키징하고 성공 및 실패 콜백 함수에서 처리합니다. 이러한 방식으로 우리는 제3자 웹사이트로 이동하여 로그인하고 Vue에서 반환 매개변수를 받는 작업을 쉽게 완료할 수 있습니다. 🎜🎜Summary🎜🎜 이번 글에서는 Vue에서 로그인을 위해 타사 웹사이트로 점프하는 방법과 매개변수 반환 시 이를 처리하는 방법을 소개했습니다. 우리는 템플릿 구문을 사용하여 컴포넌트에 점프 매개변수를 삽입하고 반환 매개변수를 추출하고 처리했습니다. 프런트엔드 개발자로서 타사 웹사이트와 상호 작용하고 반환 매개변수를 처리하는 방법을 이해하는 것이 중요합니다. 이 글의 소개를 통해 여러분은 이 기술을 익히고 실제 개발에 적용할 수 있게 되었다고 믿습니다. 🎜

위 내용은 vue는 타사 웹사이트로 이동하여 로그인 후 매개변수를 반환합니다.의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!