脚本宝典收集整理的这篇文章主要介绍了在项目中如何处理token?,脚本宝典觉得挺不错的,现在分享给大家,也给大家做个参考。
在项目中,后端接口中只有登录接口是不需要token的,其他接口都需要token才能访问。
登陆功能之后,从后端获取到了token值,在接下来的其他请求中,接口服务器都会去检查token值,这里我们提前把它保存到统一管理公共状态的 vuex中
使用vuex来保存登录接口获取到的token
使用vuex的基本逻辑F1a;数据放在state中,要修改数据则调用Mutations
整体思路如下
由于项目中,已经用了modules,直接在Store/modules/user.js
中定义token
const state = {
token: null // 默认为null
}
在store/modules/user.js
中
// 修改状态
const mutations = {
// 设置token
setToken(state, newToken) {
state.token = token // 设置token
},
// 删除token
removeToken(state) {
state.token = null // 删除vuex的token
}
}
在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的基本流程:
token作为我们其它请求的用户标识,我们使用请求拦截器做一下统一处理,让每一个请求的header中都拥有token
@H_29_360@
将登陆获取到的token统一注入到接口的请求头中 。
我们在上面的操作中已经将token保存到了vuex中,接下来,只需要在axios 的请求拦截器中取出token值再填充到header中即可。
在文件**src/utils/request.js
**中:
// 不是在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 是本项目的后端接口要求的写法。
/**
* @description: 获取用户资料
* @param {*}
* @return {*}
*/
export function getUserPRofile() {
return request({
url: '/Sys/profile',
method: 'post'
})
}
当然这个接口是需要token才能访问的
2.在login/index.vue中补充按钮来测试调用它
重点检查请求头中是否携带了token
语法:在普通.js文件中使用store时,直接导入模块即可
业务:所有的请求都会经过请求拦截器,所以方便它用来统一给请求头中添加token
以上是脚本宝典为你收集整理的在项目中如何处理token?全部内容,希望文章能够帮你解决在项目中如何处理token?所遇到的问题。
本图文内容来源于网友网络收集整理提供,作为学习参考使用,版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ:384754419,请注明来意。