返回登录前的页面
// 登录成功,不进入主页 ===> 进入指定页面(退出之前的页面)
// 从地址栏中取出 return_url ===> this.$router.query.return_url
// 回到退出之前的页面
// 退出之前的页面是否是主页
const return_url = this.$route.query.return_url || '/'
this.$router.push(return_url)
在响应拦截器中处理 token 超时
// token超时
// 1. 本地数据删除
store.dispatch('user/logout')
// 2. 返回登录页
router.push('/login?return_url=' + encodeURIComponent(router.currentRoute.fullPath))
退出登录
// 1. 清空用户信息
await this.$store.dispatch('user/logout')
// 2. 跳回登录页 获取网址信息
// encodeURIComponent 对字符进行转码: & => %26
this.$router.push('/login?return_url=' + encodeURIComponent(this.$route.fullPath))
动态路由-不同权限动态生成功能菜单的整体思路
思路分析
- 用户A登录成功之后,后端返回ta的权限信息:能访问的页面的标识集合
- 根据上一步得到的标识集合,在本地的8个页面中,选出用户A能访问的页面集合
- 加上合法用户都能访问的页面集合,一起构成
动态路由-拆分静态路由表和动态路由表
● 静态路由表:不需要做权限控制的路由,每个用户都可以正常访问。
● 动态路由表:需要做权限控制的路由,用户如果权限不一致访问到的路由也不一样。