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(发邮件时,请将#更换为@)进行举报,并提供相关证据,一经查实,本站将立刻删除涉嫌侵权内容。