vue使用token,vue token失效返回登录
最近做了一个新的vue项目，刚好有登录部分。本文将详细介绍登录部分的实现，通过示例代码详细介绍。感兴趣的朋友可以参考一下。
使用令牌进行登录验证的想法大致如下：
1.第一次登录时，前端调用后端的接口，将用户名和密码传递给后端。
2.后端接收请求，验证用户名和密码，并在验证成功后向前端返回一个令牌值。
3.前端从后端接收令牌值，并将令牌存储在本地loaclStorage和vuex中。(该项目使用vue框架和vuex全局状态管理)
4.前端路由每跳一次，就判断localStorage中是否有令牌。如果不是，则跳转到登录页面，如果是，则跳转到相应的页面。
5.封装一个通用的请求接口方法。每次请求调用后端接口时，都会在请求头上附加一个令牌。
6.后端判断请求头中是否有令牌。如果有令牌，它将获取令牌并验证它。如果验证成功，它将返回数据。如果验证失败(例如，令牌过期)，它将向前端返回一个状态代码，通常为401。如果请求头中没有令牌，它将返回401。(步骤6由后端完成，前端只需要根据后端返回的状态做所有相应的处理。)
7.如果前端得到后台，状态码是401，清除令牌，跳转到登录页面。
实际步骤
1.添加全局方法来保存和删除项目中store.js文件中的token。
//添加方法以在两个stores.js中添加和删除变异中的标记。
从“vue”导入Vue
从“vuex”导入Vuex
Vue.use(Vuex)
Const state={//全局管理的数据存储
is log in:“0”，
ser:空，
token:local storage . getitem( token )？localStorage.getItem(token ): ，//token
};
导出默认的新Vuex。商店({
状态，
Getters:{ //侦听数据更改
GetStorage(state){ //获取本地存储的登录信息。
如果(！state.token){
state . token=JSON . parse(local storage . getitem(key))
}
返回状态.令牌
}
},
突变：{
$_setToken(state，value) {//设置存储令牌
state.token=value
localStorage.setItem(token ，value)；
},
$ _ removestorage (state，value){//删除令牌
local storage . remove item( token )；
},
}
})
2.登录页面(login.vue)成功登录方法调用接口后，令牌存储在localStorage中。
//login.vue页面
方法：{
loginFun(){
这个。$api.post(请求的后端接口链接，{
数据：{
UserId:this.user，//登录名
UserPwd:this.psw，//登录密码
}
}).然后((res)={
if(res.data.status==200){
var userInfo=RES . data . data；
这个。$store.commit($_setToken ，userinfo . token)；
Toast({消息：登录成功，类型：成功，时长：1500 })；//ui弹出提示
这个。$ router . push({ name: home page })；//跳转到主页
}否则{
toast({ message:RES . data . message，时长：1500 })；//ui弹出提示
}
})
}
}
3.在main.js中添加一个请求拦截器，在请求头中添加一个令牌。
从“vue”导入Vue
从导入应用程序。/App.vue
从导入路由器。/路由器/路由器
从导入存储。/商店/商店
从导入资金。/utils/public fun//public方法
“导入”。/mintUi //根据需要引入mintUi。如果您需要配置它，请在mintUi.js中进行配置
导入 @/assets/mui/CSS/mui . CSS //mui . CSS样式
axios插件简介*/
从“axios”导入axios
Vue.prototype. $ http=axios
//全局路由构造函数，决定是否登录跳转页面。
router.beforeEach((收件人，发件人，下一个)={
如果(到。matched . some(m=m . meta . require auth)){//需要登录
if(window . local storage . token window . local storage . is login=== 1 ){
下一个()
} else if (to.path！==/login) {
let token=window . local storage . token；
if(token=== null token== token===undefined){
下一步({path: /login})
Toast({ message:检测到您还未登录，请登录后操作!,时长：1500 })
}
}否则{
下一个()
}
} else { //不需要登录
下一个()
}
})
//配置公共全球资源定位器(统一资源定位器)
axios。默认值。基本URL= http://www。辛娅。在线/API/
//添加请求拦截器
axios.interceptors.request.use(
配置={
if(store.state.token){
配置。标题。公共[令牌]=存储。状态。代币
}
返回配置；
},
错误={
//对请求错误做什么
返回承诺。拒绝(错误);
})
//http响应响应拦截器
axios。截击机。回应。使用(
响应={
返回响应；
},
错误={
if(error.response){
开关（错误。响应。状态){
案例401:
本地存储。移除项目(“令牌”)；
router.replace({
路径："/视图/登录"，
查询：{重定向：路由器。电流输出。完整路径}//登录成功后跳入浏览的当前页面
})
}
}
})
vue。原型。$ public fun=public fun//挂载全局公用方法
vue。原型。$ Apps=Apps//app。射流研究…公用方法
Vue.config.productionTip=false
新Vue({
路由器，
店，
render: h=h(App)
}).$ mount("# app ")
看到代币
退出的时候
returnFun(){ //退出登录
messagebox。确认(这个。郎。注销提示).然后(动作={
这个100美元商店。commit($ _ remove storage )；//清除登录信息
这个. router.push({
名称："登录"
});
吐司({留言：这个。郎。注销成功，时长：1500 });
}).catch(()={})
}
到此这篇关于某视频剪辑软件获取代币实现代币登录的示例代码的文章就介绍到这了，更多相关某视频剪辑软件令牌登录内容请搜索我们以前的文章或继续浏览下面的相关文章希望大家以后多多支持我们！
郑重声明：本文由网友发布，不代表盛行IT的观点，版权归原作者所有，仅为传播更多信息之目的，如有侵权请联系，我们将第一时间修改或删除，多谢。