vue实现登陆登出的实现示例
发布时间：2020-12-17 02:47:40 所属栏目：百科 来源：网络整理
导读：最近接手的B端项目选择了vue来做，此项目使用element ui Message等为组件 望周知 需求 登陆成功后跳转至首页 首页不能手动跳转至登陆页 登陆后跳转至目标页面 此次B端SPA项目把ak存在localstorage中 1.登陆的跳转利用全局钩子router.beforeEach { // 若userk
|
最近接手的B端项目选择了vue来做，此项目使用element ui Message等为组件 望周知 需求
此次B端SPA项目把ak存在localstorage中 1.登陆的跳转利用全局钩子router.beforeEach {
// 若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?redirect=%2Fapp 在登陆提交处还得对redirect参数进行处理 需求若ak失效后发送请求时弹出失效弹出框返回到登陆页面 以下做了个简单的例子若请求返回的参数带0则登陆失效 {
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' ? `请求地址出错` : `请求地址出错: ${error.response.config.url}`)
break
case 408:
error.message = '请求超时'
break
case 500:
error.message = '服务器内部错误'
break
case 501:
error.message = '服务未实现'
break
case 502:
error.message = '网关错误'
break
case 503:
error.message = '服务不可用'
break
case 504:
error.message = '网关超时'
break
case 505:
error.message = 'HTTP版本不受支持'
break
default:
}
Message({
message: error.message,type: 'error',duration: 5 * 1000
})
}
return Promise.reject(error)
}
)
需求手动登出 {
const info = {
'userkey': localStorage.getItem('userKey')
}
self.$store.dispatch('LogOut',info).then(() => {
self.$router.push({ path: '/login' })
}).catch(() => {
})
}).catch(() => {
}) 简单的登陆登出结束啦～ 以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持编程之家。 （编辑：李大同） 【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容! |