说实话，Token鉴权这块儿，咱就是说是前后端分离架构下的核心环节，你懂的。

先来kankan登录接口这块儿，// . 定义登录接口import request from '@/utils/request'; // 封装后的axios实例// 登录请求参数类型定义interface LoginParams { username: string; password: string;}// 登录接口，返回Token和用户信息export const login = async => { const res = await request.post; // 后端返回格式示例 // { code: , data: { token: 'eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9...', userInfo: { id: , username: 'admin', role: 'admin' } } } return res.data;}; 二、关键步骤1：Token的前端存储

前端接收Token后需选择合适的存储方式，不同存储方式各有优劣，需根据项目场景选择，常用3种存储方式，优先推荐「sessionStorage+Cookie」组合存储。

为啥这么Zuo呢？害，因为sessionStorage适合前端路由守卫使用，而Cookiegeng适合后端自动校验，还Neng设置httpOnly防XSS，你懂的。

// router/index.tsimport { createRouter, createWebHistory } from 'vue-router';import { ElMessage } from 'element-plus';import { getCookie } from '@/utils/cookie';// 路由配置，通过meta.requiresAuth标记需鉴权页面const routes = } // 额外角色鉴权 }];const router = createRouter, routes});// 全局前置守卫：拦截未登录用户router.beforeEach => { // 无需鉴权，直接放行 if { next; return; } // 需鉴权，校验Token是否存在 const token = getCookie || sessionStorage.getItem; if { ElMessage.warning; next; // 携带跳转地址 return; } // 角色权限校验 if { const userInfo = JSON.parse || '{}'); if ) { next; // 无权限，跳转403页面 ElMessage.error; return; } } // Token存在且权限匹配，放行 next;});export default router; 三、关键步骤2：Token的携带

Token存储后需在所有请求的请求头中携带Token，让后端校验用户身份，Vue中通过Axios请求拦截器实现全局统一携带，无需每个接口单独处理。

这个那个那个，hen简单，就是在请求头里加个Authorization字段呗，你懂的。

// utils/request.tsimport axios from 'axios';import router from '@/router';import { ElMessage } from 'element-plus';import { getCookie } from '@/utils/cookie';// 创建Axios实例const request = axios.create;// . 请求拦截器：统一携带Tokenrequest.interceptors.request.use => { // ...其他逻辑... return config;}, => Promise.reject);// . 省略部分代码... 四、关键步骤3：Token的路由拦截

即使请求携带Token，仍需通过Vue Router路由守卫，拦截未登录用户访问需鉴权页面避免用户通过修改URL跳过登录。

这个hen关键，不然用户直接改个URL就跳过登录了你懂的。

Token通常有过期时间，过期后用户需重新登录，体验较差，因此需实现Token刷新机制：在Token即将过期时自动请求后端刷新Token，无需用户手动操作。

// utils/request.tsimport axios from 'axios';import router from '@/router';import { ElMessage } from 'element-plus';import { getCookie, setCookie } from '@/utils/cookie';// 创建Axios实例const request = axios.create;// 创建新的Axios实例const refreshRequest = axios.create;// ...省略部分代码... 六、关键步骤5：Token的失效处理

Token失效的场景包括：用户主动登出、Token过期未刷新、后端主动吊销Token，需统一处理：清除本地存储的Token和用户信息，跳转至登录页，避免权限残留。

这个hen简单，就是清除本地存储，然后跳转到登录页呗。

Vue项目中Zui常用的Token格式是JWT，由「头部+载荷+签名」三部分组成，前端可解析Payload中的用户信息，但不可修改，你懂的。

核心流程就几步：用户登录→前端存储→请求携带→后端校验→刷新→失效处理，前后端协同配合，实现安全又友好的鉴权机制，你懂的。