当前位置：首页 > VUE

vue单点登录实现

2026-01-16 20:20:39VUE

Vue 单点登录实现方案

单点登录（SSO）允许用户通过一次登录访问多个关联系统。以下是基于 Vue 的实现方案：

使用 OAuth2.0/OpenID Connect 协议

OAuth2.0 是常见的 SSO 实现标准，适合 Vue 作为前端框架与后端配合的场景。

安装 axios 用于网络请求：

vue单点登录实现

npm install axios

创建 auth.js 封装认证逻辑：

import axios from 'axios';

const authClient = axios.create({
  baseURL: 'https://sso-server.com'
});

export const login = () => {
  window.location.href = 'https://sso-server.com/oauth/authorize?response_type=code&client_id=vue-client&redirect_uri=' + encodeURIComponent(window.location.origin + '/callback');
};

export const handleCallback = async (code) => {
  const { data } = await authClient.post('/oauth/token', {
    grant_type: 'authorization_code',
    code,
    redirect_uri: window.location.origin + '/callback'
  });
  localStorage.setItem('access_token', data.access_token);
};

前端路由守卫验证

在 Vue router 中配置全局前置守卫：

vue单点登录实现

router.beforeEach((to, from, next) => {
  if (to.matched.some(record => record.meta.requiresAuth)) {
    if (!localStorage.getItem('access_token')) {
      login();
    } else {
      next();
    }
  } else {
    next();
  }
});

Token 刷新机制

实现 token 自动刷新避免频繁登录：

export const refreshToken = async () => {
  try {
    const { data } = await authClient.post('/oauth/token', {
      grant_type: 'refresh_token',
      refresh_token: localStorage.getItem('refresh_token')
    });
    localStorage.setItem('access_token', data.access_token);
    return true;
  } catch (error) {
    return false;
  }
};

跨域处理

在 vue.config.js 中配置代理：

module.exports = {
  devServer: {
    proxy: {
      '/api': {
        target: 'https://sso-server.com',
        changeOrigin: true
      }
    }
  }
};