项目中前端如何处理token
token-处理-整体分析
背景
在项目中,后端接口中只有登录接口是不需要token
的,其他接口都需要token
才能访问。
分析
登陆功能之后,从后端获取到了token
值,在接下来的其他请求中,接口服务器都会去检查token
值,这里我们提前把它保存到统一管理公共状态的 vuex 中:
token-处理-将 token 保存到 vuex 中
目标
使用 vuex 来保存登录接口获取到的token
。
vuex 的基本使用流程
使用 vuex 的基本逻辑:数据放在state
中,要修改数据则调用mutations
:
- 先在
state
中补充定义token
; - 同时,要提供对应的用来修改
token
的mutation
,以方便在用户登陆成功之后,去设置token
。
整体思路如下:
初始化 token 状态
由于项目中,已经用了 modules,直接在store/modules/user.js
中定义 token:
const state = { token: null // 默认为 null }
提供操作 token 的 mutation
在store/modules/user.js
中:
// 修改状态 const mutations = { // 设置 token setToken(state, newToken) { state.token = token // 设置 token }, // 删除 token removeToken(state) { state.token = null // 删除 vuex 的 token } }
成功登录后提交 mutation
在 src/login/index.vue 中:
async doLogin() { try { const res = await login(this.loginForm) // console.log('用户登录 ok', res) console.log('用户登录,返回 token', res.data) // 1. 保存 token 到 vuex // 如何在组件调用带命名空间 mutations // this.$store.commit("命名空间/mutations 名",载荷) + this.$store.commit('user/setToken', res.data) } catch (err) { alert('用户登录,失败') console.log('用户登录,失败', err) } }, handleLogin() { this.$refs.loginForm.validate((valid) => { if (valid) { this.doLogin() } else { console.log('error submit!!') return false } }) }
注意:由于mutation
定义在 modules 中,所以在commit
时,加补充modules
的前缀/user/setToken
调试
在 vue 调试工具中核实效果:
总结
使用 vuex 的基本流程:
- 定义数据。 在
state 中
定义。 - 定义
mutations
。用它来操作数据。 - 在组件中调用
mutations
。this.$store.commit(‘模块名/mutation 的名字’, 参数)
token-处理-axios 请求拦截器统一注入
token 作为我们其它请求的用户标识,我们使用请求拦截器做一下统一处理,让每一个请求的 header 中都拥有 token
目标
将登陆获取到的 token 统一注入到接口的请求头中 。
思路
我们在上面的操作中已经将token
保存到了 vuex 中,接下来,只需要在axios 的请求拦截器中取出token
值再填充到 header 中即可。
请求拦截器代码
在文件**src/utils/request.js
**中:
- 引入
store
- 补充请求拦截器,代码逻辑是:
- 如果当前 vuex 中有
token
,就在请求头中设置上。
- 如果当前 vuex 中有
// 不是在 vue 组件中,不能通过 this.$store.state.user....来获取 token // 要导入 import store from '@/store' service.interceptors.request.use( config => { const token = store.state.user.token // 如果当前存有 token,就加在请求头上 if (token) { config.headers['Authorization'] = `Bearer ${token}` } return config } , error => { return Promise.reject(error) })
上面的authorization
和bearer
是本项目的后端接口要求的写法。
测试
1. 在 api/user.js 中封装一个 api 去请求用户信息
/** * @description: 获取用户资料 * @param {*} * @return {*} */ export function getUserProfile() { return request({ url: '/sys/profile', method: 'post' }) }
当然这个接口是需要 token 才能访问的。
2. 在 login/index.vue 中补充按钮来测试调用它
重点检查请求头中是否携带了 token。
小结
语法:在普通.js 文件中使用 store 时,直接导入模块即可。
业务:所有的请求都会经过请求拦截器,所以方便它用来统一给请求头中添加 token。
码云笔记 » 项目中前端如何处理token