java权限vue管理,浅谈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 */

export default [

// 部署管理

{

path: '/deploy-manage',

name: 'deploy-manage',

component: () => import('@/views/sys-admin/deploy-manage/deploy-manage.vue'),

meta: {

permitName: 'd