ThinkChat🤖让你学习和工作更高效,注册即送10W Token,即刻开启你的AI之旅 广告
## 一、概述 前端使用 js-cookie.js 管理用户的 token,结合 axios 配置,可以为每个请求头加上 token 信息; ## 二、token名称 后端系统通常会从请求 header 中获取用户的 token,因此我们需要配置好 token 名称,好让后端能正确的识别到用户 token,可以在 /utils/request.js 中设置: ![](../../images/screenshot_1610701280321.png) ## 三、token 设置 调用登录接口后拿到用户的 token 和 token 过期时间(如无过期时间,可忽略),并使用 /utils/request.js #setAuthorization 方法保存token; ~~~ import {setAuthorization} from '@/utils/request' login(name, password).then(res => { const {token, expireAt} = res.data setAuthorization({token, expireAt: new Date(expireAt)}) }) ~~~ ![](../../images/screenshot_1610701411358.png) ## 四、token 校验 默认添加了登录导航守卫,如检查到本地cookie 中不包含 token 信息,则会拦截跳转至登录页。你可以在 /router/index.js 中配置 不需要登录拦截的路由; ![](../../images/screenshot_1610701483871.png)