Vue2处理OAuth2.0授权登录流程

目的：实现用户直接进入授权页面并在登录成功后跳转到你的平台主页

在MainPage.Vue组件中处理OAuth2.0授权流程：

<template>
  <div>
    <button @click="redirectToAuthPage">登录</button>
  </div>
</template>

<script>
export default {
  methods: {
    redirectToAuthPage() {
      const clientId = 'your-client-id';
      const redirectUri = encodeURIComponent('http://your-redirect-uri');
      const authUrl = `http://auth-server/oauth/authorize?response_type=code&client_id=${clientId}&redirect_uri=${redirectUri}`;
      window.location.href = authUrl;
    },
    handleAuthCallback() {
      const code = this.$route.query.code;
      if (code) {
        this.getAccessToken(code);
      }
    },
    async getAccessToken(code) {
      //参数示例
      const clientId = 'your-client-id';
      const clientSecret = 'your-client-secret';
      const redirectUri = 'http://your-redirect-uri';
      const tokenUrl = 'http://auth-server/oauth/token';

      const response = await this.$http.post(tokenUrl, {
        grant_type: 'authorization_code',
        code,
        redirect_uri: redirectUri,
        client_id: clientId,
        client_secret: clientSecret,
      });

      const accessToken = response.data.access_token;
      this.getUserInfo(accessToken);
    },
    async getUserInfo(accessToken) {
      const userInfoUrl = 'http://auth-server/oneid/user/get';
      const response = await this.$http.get(userInfoUrl, {
        headers: {
          Authorization: `Bearer ${accessToken}`,
        },
      });

      const userInfo = response.data;
      this.$store.commit('setUserInfo', userInfo);
      this.$router.push('/main');
    },
  },
  created() {
      this.$root.$on('handleAuthCallback', this.handleAuthCallback);
  },
  mounted() {
    this.handleAuthCallback();
  },
};
</script>

在Vuex中存储用户信息：

import Vue from 'vue';
import Vuex from 'vuex';

Vue.use(Vuex);

export default new Vuex.Store({
  state: {
    userInfo: null,
  },
  mutations: {
    setUserInfo(state, userInfo) {
      state.userInfo = userInfo;
    },
  },
  actions: {
  },
});

在路由中配置回调页面：

import Vue from 'vue';
import Router from 'vue-router';
import AuthCallback from './components/AuthCallback.vue';
import MainPage from './components/MainPage.vue';

Vue.use(Router);

export default new Router({
  routes: [
    {
      path: '/auth-callback',
      component: AuthCallback,
    },
    {
      path: '/main',
      component: MainPage,
    },
  ],
});

在AuthCallback.vue中处理回调：

<template>
  <div>
    处理授权回调中...
  </div>
</template>

<script>
export default {
  mounted() {
    this.$nextTick(() => {
      this.$root.$emit('handleAuthCallback');
    });
  },
};
</script>