vue每次请求都验证token,vue token失效返回登录
本文主要介绍了VUE令牌登录验证的实现，并详细记录了令牌登录验证的步骤。本文中的样例代码非常详细，具有一定的参考价值，感兴趣的朋友可以参考一下。
本文分享了VUE实现的令牌登录验证的具体代码，供大家参考。具体内容如下
实现这个登录功能的过程真的是一波三折。中间出了个bug，花了两三天才解决。我筋疲力尽，感觉自己的毅力和耐心又提高了一个层次。
还好在同学的帮助下，终于解决了bug，但是再次感受到了菜鸟的浅薄，大题屡屡触及自己的知识盲区.现在请详细记录实现令牌登录验证的步骤，防止以后出错。
1.封装store对token的操作方法
首先，在src目录下创建一个store文件夹，然后创建一个main.js文件。
main.js中存储的代码的作用是获取token的值，并用localStorage存储和删除本地token的值。
从“Vue”导入Vue；
从“Vuex”导入Vuex；
vue . use(Vuex)；
导出默认的新Vuex。商店({
状态：{
token:local storage . getitem( token )？localStorage.getItem(token ):
},
突变：{
setToken(状态，令牌){
state.token=token
localStorage.setItem(token ，token . token)；//存储令牌
},
delToken(州){
state . token=“”；
local storage . remove item( token )；//删除令牌
}
}
})
2.在页面中连接登录接口进行验证
登录
(1)输入框代码
Type= text v-model=用户名 placeholder=用户名/
input= password v-model= password placeholder= password /
(2)脚本代码
脚本
从“vuex”导入{ map mutations }；
导出默认值{
姓名：经理登录，
data() {
返回{
用户名：，//用户名
密码：，//密码
};
},
方法：{
.mapMutations([setToken])，
登录：函数(){
if(this . username=== this . password=== ){
Alert(账号或密码不能为空！);
}
否则{
//根据api接口获取令牌
这个。$ Ajax . get( http:///API/wx/Public/log in ，{
Params: {//传入了参数
用户名：this.username，密码：this.password，设备类型：移动
}
}).然后(
res={
console . log(RES . data)；
If(RES . data . code==1){//If code=1，验证成功。
this . settoken({ token:RES . data . data . token })；//存储区中的标记分配方法
这个。$ router . push(/manager home )；
}
否则{
alert(RES . data . msg)；//弹出错误信息
}
}).catch(错误={
Alert(“接口连接错误”)；
console.log(错误)；
});
}
}
}
/脚本
退出登录
脚本
从“vuex”导入{ map mutations }；
导出默认值{
姓名：经理信息，
方法：{
.mapMutations([delToken])，
退出：函数(){
this . deltoken({ token: })；
这个。$ router . push(/manager log in )；
}
}
}
/脚本
3.路由守卫
这段代码放在路由文件中，其作用是在页面跳转前检查本地存储的用于登录验证的令牌值，以确定是否跳转。
router.beforeEach((收件人，发件人，下一个)={
if(to . path===/manager log in ){//要跳转的页面是登录界面。
next()；//直接跳转
}
else if(to . path===/manager home ){//你要跳转的页面是个人界面。
let token=local storage . getitem( token )；//获取本地存储的令牌值
If(token===null token== ){//如果令牌为空，则验证不成功。跳转到登录页面。
next(/manager log in )；
}
Else{ //不为空，则验证成功。
next()；
}
}
否则{
next()；
}
});
导出默认路由器；
4.axios请求拦截器
这段代码放在src文件下的mian.js文件中。
从“axios”导入axios；
从导入存储。/store/main ；
Vue.prototype.$ajax=axios
新Vue({
埃尔： #app ，
路由器，
商店，//要添加的商店
组件：{ App }，
模板：“应用程序/”
})
//请求拦截器
axios . interceptors . request . use(config={
//判断是否有令牌，如果有，将令牌添加到每个页面的页眉。
if(store.state.token){
config . headers . common[ XX-Token ]=这里的store.state.token//The XX-Token应该是按照登录界面中请求头的名称来写的。
}
返回配置；
}，错误={
//请求错误
return Promise.reject(错误)；
});
///响应拦截器
axios . interceptors . response . use(
响应={
返回响应；
},
Error={//默认情况下，除2XX以外的所有错误都是错误
if(error.response){
开关(错误.响应.状态){
案例401:
这个。$ store . commit( delToken )；
Router.replace({ //跳转到登录页面
路径：“/manager登录”，
查询：{ redirect:router . current out . full path }//以跳转的路由路径为参数，成功登录后跳转到该路由。
});
}
}
return Promise.reject(错误.响应)；
}
);
你完了！
把我后端接口的数据结构作为参考。上面的代码在使用不同的接口时会有一些差异，要懂得灵活运用。
这就是本文的全部内容。希望对大家的学习有帮助，支持我们。
郑重声明：本文由网友发布，不代表盛行IT的观点，版权归原作者所有，仅为传播更多信息之目的，如有侵权请联系，我们将第一时间修改或删除，多谢。