Vue全局拦截所有请求并在请求头中添加token方式
Vue全局拦截所有请求并在请求头中添加token
在实际的项目中,为了登录的安全,token是必不可少的,所以就需要前后端配合,后端生成和验证token(这方面我也写过文章,讲述后端对token的处理),前端在每一次请求中都要在请求头上加上token。
第一步:先讲一讲前端要对token做什么
首先,当我们在登录页面输入账号密码之后,点击登录,后端除了会验证账号密码是否正确,还会生成token,然后将token与登录结果一起返回。
这时候前端就需要解析后端返回的数据,取到token,放到sessionStorage中。
下面就是我随便写的提交登录表单的方法
//提交表单数据
submitForm(formName) {
const that = this
axios({
method: "post",
url: connectUrl+":10003/login/acount",
data:{
userName:this.ruleForm.userName,
password:this.ruleForm.password,
option:0,
loginTime:new Date()
}
}).then(function(response){
if(response.data.code === 200){
sessionStorage.setItem("token",response.data.data.token);
sessionStorage.setItem("userName",response.data.data.userName);
that.$router.push({
name:'index'
})
that.$message.success("登录成功")
}else{
that.$message.error("权限不足:账号密码错误")
}
});
}简单来说:
将token放入sessionStorage的操作的关键代码就是这一行:
sessionStorage.setItem("token",response.data.data.token);第二步:查看sessionStorage中是否保存了token

成功将token保存到sessionStorage后,就可以开始拦截每次请求,将token放到请求头中了
第三步:找到vue项目中的main.js文件,并引入axios

第四步:在main.js中写相关的拦截请求的代码
// 添加请求拦截器
axios.interceptors.request.use(function (config) {
// 在发送请求之前做些什么
// 判断是否存在token,如果存在将每个页面header添加token
if (sessionStorage.getItem("token")) {
config.headers.common['Authorization'] = sessionStorage.getItem("token");
}
return config
}, function (error) {
router.push('/login')
return Promise.reject(error)
})上面是请求拦截器,其实还可以对响应进行拦截(可有可无,可以不写,不影响请求拦截器的实现)
// 添加响应拦截器
axios.interceptors.response.use(function (response) {
// 对响应数据做点什么
return response
}, function (error) {
// 对响应错误做点什么
if (error.response) {
switch (error.response.status) {
case 401:
store.commit('del_token')
router.push('/login')
}
}
return Promise.reject(error)
})总结
好了,以上就是"Vue:全局拦截所有请求,并在请求头中添加token"的全部内容了
这些仅为个人经验,希望能给大家一个参考,也希望大家多多支持脚本之家。
相关文章
vue3数据监听watch/watchEffect的示例代码
我们都知道监听器的作用是在每次响应式状态发生变化时触发,在组合式 API 中,我们可以使用 watch()函数和watchEffect()函数,下面我们来看下vue3如何进行数据监听watch/watchEffect,感兴趣的朋友一起看看吧2023-02-02
uniapp定义new plus.nativeObj.View实现APP端全局弹窗功能
文章介绍了在UniApp中使用`newplus.nativeObj.View`实现弹窗的原因和方法,它定义了一个`AppPopupView`弹窗函数,并在`main.js`中挂载到全局页面,以便在任何地方调用,感兴趣的朋友跟随小编一起看看吧2024-11-11
Vue无法访问.env.development定义的变量值问题及解决
这篇文章主要介绍了Vue无法访问.env.development定义的变量值问题及解决,具有很好的参考价值,希望对大家有所帮助。如有错误或未考虑完全的地方,望不吝赐教2023-01-01


最新评论