最近接手的B端项目选择了vue来做，此项目使用element ui Message等为组件 望周知
需求
- 登陆成功后跳转至首页
- 首页不能手动跳转至登陆页
- 登陆后跳转至目标页面
此次B端SPA项目把ak存在localstorage中
1.登陆的跳转利用全局钩子router.beforeEach
//router.js
router.beforeEach((to, from, next) => {
// 若userkey不存在并且前往页面不是登陆页面，进入登陆
// 若userkey存在并且前往登陆页面，进入主页
const userKey = localStorage.getItem('userKey')
if (!userKey && to.path !== '/login') {
next({
path: '/login',
query: { redirect: to.fullPath }
})
} else if (userKey && to.path === '/login') {
next({ path: '/' })
} else {
next()
}
})
上面使用了query带上目标参数
例子：#/login"htmlcode">
//若验证成功跳转
var redirect = decodeURIComponent(this.$route.query.redirect || '/')
self.$router.push({
// 你需要接受路由的参数再跳转
path: redirect
})
需求
若ak失效后发送请求时弹出失效弹出框返回到登陆页面
以下做了个简单的例子若请求返回的参数带0则登陆失效
// respone拦截器
axios.interceptors.response.use(
response => {
console.log(response)
const data = 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 {
return response
}
},
error => {
if (error && error.response) {
switch (error.response.status) {
case 400:
error.message = '请求错误'
break
case 401:
error.message = '未授权，请登录'
break
case 403:
error.message = '拒绝访问'
break
case 404:
error.message = (process.env.NODE_ENV === 'production' "htmlcode">
loginOut() {
var self = this
this.$confirm('您确定要退出吗?', '退出管理平台', {
confirmButtonText: '确定',
cancelButtonText: '取消'
}).then(() => {
const info = {
'userkey': localStorage.getItem('userKey')
}
self.$store.dispatch('LogOut', info).then(() => {
self.$router.push({ path: '/login' })
}).catch(() => {
})
}).catch(() => {
})
}
简单的登陆登出结束啦～
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持。
免责声明：本站文章均来自网站采集或用户投稿，网站不提供任何软件下载或自行开发的软件！
如有用户或公司发现本站内容信息存在侵权行为，请邮件告知！ 858582#qq.com
桃源资源网 Design By www.nqtax.com
暂无“vue实现登陆登出的实现示例”评论...
《魔兽世界》大逃杀！60人新游玩模式《强袭风暴》3月21日上线
暴雪近日发布了《魔兽世界》10.2.6 更新内容，新游玩模式《强袭风暴》即将于3月21 日在亚服上线，届时玩家将前往阿拉希高地展开一场 60 人大逃杀对战。
艾泽拉斯的冒险者已经征服了艾泽拉斯的大地及遥远的彼岸。他们在对抗世界上最致命的敌人时展现出过人的手腕，并且成功阻止终结宇宙等级的威胁。当他们在为即将于《魔兽世界》资料片《地心之战》中来袭的萨拉塔斯势力做战斗准备时，他们还需要在熟悉的阿拉希高地面对一个全新的敌人──那就是彼此。在《巨龙崛起》10.2.6 更新的《强袭风暴》中，玩家将会进入一个全新的海盗主题大逃杀式限时活动，其中包含极高的风险和史诗级的奖励。
《强袭风暴》不是普通的战场，作为一个独立于主游戏之外的活动，玩家可以用大逃杀的风格来体验《魔兽世界》，不分职业、不分装备（除了你在赛局中捡到的），光是技巧和战略的强弱之分就能决定出谁才是能坚持到最后的赢家。本次活动将会开放单人和双人模式，玩家在加入海盗主题的预赛大厅区域前，可以从强袭风暴角色画面新增好友。游玩游戏将可以累计名望轨迹，《巨龙崛起》和《魔兽世界：巫妖王之怒 经典版》的玩家都可以获得奖励。