当前位置：首页 > wzjs >正文

网站建设全过程及如何赚钱今日小说搜索百度风云榜

wzjs 2025/8/11 3:04:43

网站建设全过程及如何赚钱,今日小说搜索百度风云榜,网站建设研究,企业网站制作费做分录引言在当今多系统协作的互联网应用中，用户常常需要在多个子系统间切换。重复登录不仅降低效率，还影响用户体验。单点登录（Single Sign-On, SSO） 应运而生，允许用户一次登录即可访问所有信任的系统。本文将以Vue框架为…

引言

在当今多系统协作的互联网应用中，用户常常需要在多个子系统间切换。重复登录不仅降低效率，还影响用户体验。单点登录（Single Sign-On, SSO） 应运而生，允许用户一次登录即可访问所有信任的系统。本文将以Vue框架为例，详细解析如何实现基于Token的SSO方案。

一、什么是单点登录（SSO）？

SSO是一种身份验证机制，用户只需在一个系统中登录，即可访问其他关联系统而无需重复认证。例如，登录Gmail后可直接使用Google Drive、YouTube等服务。

核心流程：

用户访问子系统A，被重定向至中央认证中心。
用户登录后，认证中心颁发令牌（Token）。
子系统A通过验证令牌获取用户信息。
用户访问子系统B时，重复验证令牌流程，无需再次登录。

二、技术选型：Vue + JWT + OAuth2.0

Vue：前端框架，负责用户界面和路由控制。
JWT（JSON Web Token）：轻量级的安全令牌，包含用户信息和签名，适合跨域传输。
OAuth2.0：授权框架，支持SSO的常见协议（如授权码模式）。

三、实现步骤详解

1. 系统架构设计

认证中心（Auth Server）：独立服务，处理登录/注销，签发JWT。
子系统（Vue应用）：依赖认证中心验证令牌，维护用户会话。

2. Vue前端关键实现

（1）路由守卫：拦截未登录访问

javascript

复制

// router.js
import router from './router';
import store from './store';router.beforeEach((to, from, next) => {const isAuthenticated = store.getters['auth/isLoggedIn'];if (to.meta.requiresAuth && !isAuthenticated) {next({ path: '/login', query: { redirect: to.fullPath } });} else {next();}
});

（2）登录跳转与Token处理

javascript

复制

// Login.vue
export default {methods: {redirectToAuthServer() {const authUrl = `${authServerUrl}/login?client_id=${clientId}&redirect_uri=${encodeURIComponent(window.location.origin + '/callback')}`;window.location.href = authUrl;},// 回调页面解析TokenhandleCallback() {const token = this.$route.query.token;if (token) {this.$store.dispatch('auth/saveToken', token);this.$router.replace(this.$route.query.redirect || '/');}}}
}

（3）全局Axios拦截器

javascript

复制

// axios.js
axios.interceptors.request.use(config => {const token = store.getters['auth/token'];if (token) {config.headers.Authorization = `Bearer ${token}`;}return config;
});axios.interceptors.response.use(response => response, error => {if (error.response.status === 401) {store.dispatch('auth/logout');window.location.href = '/login';}return Promise.reject(error);
});

3. 用户状态管理（Vuex）

javascript

复制

// store/auth.js
const state = { token: null };
const mutations = {SET_TOKEN(state, token) {state.token = token;localStorage.setItem('jwt', token); // 持久化存储},CLEAR_TOKEN(state) {state.token = null;localStorage.removeItem('jwt');}
};
const actions = {logout({ commit }) {commit('CLEAR_TOKEN');// 跳转至认证中心注销window.location.href = `${authServerUrl}/logout?redirect=${window.location.origin}`;}
};