浅谈vue权限管理实现及流程
67 浏览量
2020-11-21
12:37:24
上传
评论 1
收藏 100KB PDF 举报
浅谈浅谈vue权限管理实现及流程权限管理实现及流程
一、整体思路一、整体思路
后端返回用户权限，前端根据用户权限处理得到左侧菜单；所有路由在前端定义好，根据后端返回的用户权限筛选出需要挂载
的路由，然后使用 addRoutes 动态挂载路由。
二、实现要点二、实现要点
（1）路由定义，分为初始路由和动态路由，一般来说初始路由只有 login，其他路由都挂载在 home 路由之下需要动态挂载。
（2）用户登录，登录成功之后得到 token，保存在 sessionStorage，跳转到 home，此时会进入路由拦截根据 token 获取用
户权限列表。
（3）全局路由拦截，根据当前用户有没有 token 和 权限列表进行相应的判断和跳转，当没有 token 时跳到 login，当有 token
而没有权限列表时去发请求获取权限等等逻辑。
（4）处理用户权限，在 store.js 定义一个模块 permission.js，专门用于处理用户权限相关的逻辑，用户权限列表、菜单列表
都保存在此模块；
（5）用户权限列表、菜单列表的处理，前端的路由要和后端返回的权限有一个唯一标识（一般用路由名做标识符），根据此
标识筛选出对应的路由。
（6）左侧菜单，要和用户信息、用户管理模块使用的菜单信息一致，统一使用保存在 store 中的变量。
三、具体实现流程三、具体实现流程
1、准备工作，路由定义
/* router/indes.js */
/* 初始路由 */
let router = new Router({
mode: 'history',
routes: [
{
path: '/login',
name: 'login',
component: () => import('@/views/login.vue'),
},
] });
/* router/indes.js */
/* 准备动态添加的路由 */
export const dynamicRoutes = [
{
path: '/',
name: 'home',
component: () => import('@/views/home.vue'),
meta: {
requiresAuth: true,
},
children: [
// 用户信息
{
path: '/user-info',
name: 'user-info',
component: () => import('@/views/user-setting/user-info.vue'),
},
// 修改密码
{
path: '/user-password',
name: 'user-password',
component: () => import('@/views/user-setting/user-password.vue'),
},
] },
{
path: '/403',
component: () => import('@/views/error-page/403'),
},
{
path: '*',
component: () => import('@/views/error-page/404'),
},
];
系统主要页面的路由，后续会将这些路由经过权限筛选，添加到 home 路由的 children 里面
/* router/router.js */
评论0