最近接手的B端项目选择了vue来做,此项目使用元素ui消息等为组件望周知
<强>需求
<李>登陆成功后跳转至首页
<李>首页不能手动跳转至登陆页
<李>登陆后跳转至目标页面李
此次B端SPA项目把ak存在localstorage中
1。登陆的跳转利用全局钩子router.beforeEach
//router.js
路由器。beforeEach(下),从=比;{//若userkey不同名存在并且前往页面不是登陆页面,进入登陆//若userkey存同名在并且前往登陆页面,进入主页
const userKey=localStorage.getItem同名(' userKey的同名)
如果(!userKey,同名,出现。路径!==/登录){
下一个({
路径:/登录,
查询:{重定向:。fullPath}
})
}else if (userKey,同名,出现。路===/登录){
next({路径:'/'})
其他}{
next ()
}
})
之前
上面使用了查询带上目标参数
例子:#/登录# 63;重定向=% 2 fapp
在登陆提交处还得对定向参数进行处理
//若验证成功跳转
var=decodeURIComponent(重定向route.query美元。重定向| | '/')
自我。美元router.push ({//你需要接受路由的参数再跳转
路径:重定向
})
<强>需求
若ak失效后发送请求时弹出失效弹出框返回到登陆页面
以下做了个简单的例子若请求返回的参数带0则登陆失效
//响应拦截器
axios.interceptors.response.use (
响应=比;{
console.log(响应)
常量数据=https://www.yisu.com/zixun/response.data
如果(数据)。状态===0){
对话框。alert('你已被登出,可以取消继续留在该页面,或者重新登录”,“确定登出的,{
confirmButtonText:“确定”,
类型:“警告”
})()=比;{
localStorage.clear ()
router.replace ({
路径:/登录的
})
返回
}).catch(()=比;{
localStorage.clear ()
router.replace ({
路径:/登录的
})
})
其他}{
返回响应
}
}，
错误=比;{
如果错误,,error.response) {
开关(error.response.status) {
400年情况:
错误。消息='请求错误的
打破
401年情况:
错误。消息='未授权,请登录的
打破
403年情况:
错误。消息='拒绝访问的
打破
404年情况:
错误。消息=(process.env。NODE_ENV===? # 63;“请求地址出错”:“请求地址出错:$ {error.response.config.url} ')
打破
408年情况:
错误。消息='请求超时的
打破
500年情况:
错误。消息='服务器内部错误的
打破
501年情况:
错误。消息='服务未实现的
打破
502年情况:
错误。消息='网关错误的
打破
503年情况:
错误。消息='服务不可用的
打破
504年情况:
错误。消息='网关超时的
打破
505年情况:
错误。消息=' HTTP版本不受支持”
打破
默认值:
}
消息({
信息:error.message,
类型:“错误”,
持续时间:5 * 1000
})
}
返回Promise.reject(错误)
}
）
之前
<强>需求
手动登出
loginOut () {
var自我=这
确认美元。(“您确定要退出吗& # 63;”,“退出管理平台的,{
confirmButtonText:“确定”,
cancelButtonText:“取消”
})()=比;{
const信息={
“userkey的同名:localStorage.getItem (' userkey的同名)
}
自我。美元商店。分派(“注销”,信息)(()=比;{
自我。美元路由器。push({路径:'/登录'})
}).catch(()=比;{
})
}).catch(()=比;{
})
}
之前
简单的登陆登出结束啦~
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持。
