|
// 登录
login: async ({ commit, dispatch}, params) => {
let result = await axios(‘/api/login’, {params})
if(result.data.code > 0) {
// 登录成功以后 获取当前用户权限路由
let userRoutes = await dispatch(‘getMenu’)
if (userRoutes.code > 0) {
// 把请求回来的路由动态添加到 route 里
router.addRoutes(userRoutes.data)
// 添加完成后，现在可以跳转到首页了~
router.push(‘/home’)
}
return {code: 1, data: result.data}
} else {
console.log(result.data.msg)
return {code: 0}
}
},
现在就已经大功告成了，你的项目可以进行正常的登录、跳转、动态更新路由等操作了
但是
现在还差最后一步，退出登录
因为在axios拦截里面，token失效后会调用退出接口
axios.interceptors.response.use(
response => {
if (response.status === 200) {
// 身份验证失败
if(response.data.code === -1) {
// 执行退出登录
store.dispatch(‘global/loginOut’)
} else {
// 如果请求头里有token
let token = response.headers.token
if(token) {
localStorage.setItem(‘token’, token)
axios.defaults.headers.token = token
}
}
return Promise.resolve(response)
} else {
return Promise.reject(response)
}
}
)
所以才会提到开头说：刚打开页面的时候，不管有没有登录，都去请求菜单接口。
如果没有登录，则会调用退出登录接口，给路由设置默认路由。
// 退出登录
loginOut: async ({ state }) => {
// 退出登录清空 token 和 headers 里面的 token
localStorage.removeItem(‘token’)
delete axios.defaults.headers.token
// 退出登录要动态添加 登录页面 和 * 重定向页面
let errRoutes = state.allRoutes.filter(item => item.path == ‘*’)
errRoutes.push(state.allRoutes.filter(res => errRoutes[0].redirect == res.path)[0])
router.addRoutes(errRoutes);
router.currentRoute.path !== ‘/demo’ ? router.push(“/demo”) : null
let result = await axios(‘/api/loginOut’, {params: {userId: state.userId}})
if(result.data.code !== 1) {
console.log(‘退出登录接口异常’)
}
},
到现在为止，有项目就算大功告成了
到此这篇关于Vue 简单实现前端权限控制的示例的文章就介绍到这了,更多相关Vue 前端权限控制内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！
来源：脚本之家
链接：https://www.jb51.net/article/202890.htm
申请创业报道，分享创业好点子。点击此处，共同探讨创业新机遇！
本文素材来自互联网 （编辑：应用网_阳江站长网）
【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!
|
