vue实现登陆登出的实现示例
最近接手的B端项目选择了vue来做，此项目使用elementuiMessage等为组件望周知
需求
- 登陆成功后跳转至首页
- 首页不能手动跳转至登陆页
- 登陆后跳转至目标页面
此次B端SPA项目把ak存在localstorage中
1.登陆的跳转利用全局钩子router.beforeEach
//router.js
router.beforeEach((to,from,next)=>{
//若userkey不存在并且前往页面不是登陆页面，进入登陆
//若userkey存在并且前往登陆页面，进入主页
constuserKey=localStorage.getItem('userKey')
if(!userKey&&to.path!=='/login'){
next({
path:'/login',
query:{redirect:to.fullPath}
})
}elseif(userKey&&to.path==='/login'){
next({path:'/'})
}else{
next()
}
})
上面使用了query带上目标参数
例子：#/login?redirect=%2Fapp
在登陆提交处还得对redirect参数进行处理
//若验证成功跳转
varredirect=decodeURIComponent(this.$route.query.redirect||'/')
self.$router.push({
//你需要接受路由的参数再跳转
path:redirect
})
需求
若ak失效后发送请求时弹出失效弹出框返回到登陆页面
以下做了个简单的例子若请求返回的参数带0则登陆失效
//respone拦截器
axios.interceptors.response.use(
response=>{
console.log(response)
constdata=response.data
if(data.status===0){
MessageBox.alert('你已被登出，可以取消继续留在该页面，或者重新登录','确定登出',{
confirmButtonText:'确定',
type:'warning'
}).then(()=>{
localStorage.clear()
router.replace({
path:'/login'
})
return
}).catch(()=>{
localStorage.clear()
router.replace({
path:'/login'
})
})
}else{
returnresponse
}
},
error=>{
if(error&&error.response){
switch(error.response.status){
case400:
error.message='请求错误'
break
case401:
error.message='未授权，请登录'
break
case403:
error.message='拒绝访问'
break
case404:
error.message=(process.env.NODE_ENV==='production'?`请求地址出错`:`请求地址出错:${error.response.config.url}`)
break
case408:
error.message='请求超时'
break
case500:
error.message='服务器内部错误'
break
case501:
error.message='服务未实现'
break
case502:
error.message='网关错误'
break
case503:
error.message='服务不可用'
break
case504:
error.message='网关超时'
break
case505:
error.message='HTTP版本不受支持'
break
default:
}
Message({
message:error.message,
type:'error',
duration:5*1000
})
}
returnPromise.reject(error)
}
)
需求
手动登出
loginOut(){
varself=this
this.$confirm('您确定要退出吗?','退出管理平台',{
confirmButtonText:'确定',
cancelButtonText:'取消'
}).then(()=>{
constinfo={
'userkey':localStorage.getItem('userKey')
}
self.$store.dispatch('LogOut',info).then(()=>{
self.$router.push({path:'/login'})
}).catch(()=>{
})
}).catch(()=>{
})
}
简单的登陆登出结束啦～
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持毛票票。
声明：本文内容来源于网络，版权归原作者所有，内容由互联网用户自发贡献自行上传，本网站不拥有所有权，未作人工编辑处理，也不承担相关法律责任。如果您发现有涉嫌版权的内容，欢迎发送邮件至：czq8825#qq.com（发邮件时，请将#更换为@）进行举报，并提供相关证据，一经查实，本站将立刻删除涉嫌侵权内容。