在项目中如何处理token？

2024-02-19 08:27| 来源: 网络整理| 查看: 265

token-处理-整体分析背景

在项目中，后端接口中只有登录接口是不需要token的，其他接口都需要token才能访问。

分析

登陆功能之后，从后端获取到了token值，在接下来的其他请求中，接口服务器都会去检查token值，这里我们提前把它保存到统一管理公共状态的 vuex中 [外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-Cz5sdraa-1637235764341)(asset/image-20210512000632178.png)]

token-处理-将token保存到vuex中目标

使用vuex来保存登录接口获取到的token

vuex的基本使用流程

使用vuex的基本逻辑：数据放在state中，要修改数据则调用mutations

先在state中补充定义token同时，要提供对应的用来修改token的mutation，以方便在用户登陆成功之后，去设置token。

整体思路如下 [外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-NqgpSIbg-1637235764342)(asset/image-20210512001311736.png)]

初始化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调试工具中核实效果 [外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-aNqUkq7V-1637235764343)(asset/login/06.png)]

小结

使用vuex的基本流程：

定义数据。在state中定义。定义mutations。用它来操作数据。在组件中调用mutations。this.$store.commit(‘模块名/mutation的名字’，参数) token-处理-axios请求拦截器统一注入

token作为我们其它请求的用户标识，我们使用请求拦截器做一下统一处理，让每一个请求的header中都拥有token [外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-sB42ST2O-1637235764343)(asset/image-20210512000632178.png)]

目标

将登陆获取到的token统一注入到接口的请求头中。

思路

我们在上面的操作中已经将token保存到了vuex中，接下来，只需要在axios 的请求拦截器中取出token值再填充到header中即可。

请求拦截器代码

在文件**src/utils/request.js**中:

引入store补充请求拦截器，代码逻辑是：如果当前vuex中有token，就在请求头中设置上。 // 不是在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 是本项目的后端接口要求的写法。

测试在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

【本文地址】

公司简介

联系我们