前端 + 接口哀求实现 vue 动态路由

前端 + 接口哀求实现 vue 动态路由

在 Vue 应用中，通过前端团结后端接口哀求来实现动态路由是一种常见且有用的权限控制方案。这种方法答应前端根据用户的脚色和权限，动态天生和加载路由，而不是在应用启动时就固定全部的路由设置。
实现原理

• 界说静态路由设置：
  
  
  
  • 在项目标初始阶段，界说一套完备的路由设置，这些设置包罗了全部大概的路由路径和相干的权限信息。
    
  
  
• 用户登录与鉴权：
  
  
  
  • 用户登录时，前端向后端发送哀求验证用户的身份。
    
  • 服务器验证乐成后，返回一个包罗用户信息和权限的数据对象。
    
  
  
• 获取用户权限信息：
  
  
  
  • 前端根据登录时得到的令牌（如 JWT），再次向后端哀求获取当前用户的权限信息。
    
  • 权限信息大概包罗用户的脚色、可以或许访问的资源等。
    
  
  
• 动态天生路由：
  
  
  
  • 前端根据从后端获取的权限信息，动态天生符适用户权限的路由表。
    
  • 这个过程可以通过递归算法处理处罚路由设置树，根据用户的权限过滤掉无权访问的路由。
    
  
  
• 动态添加路由：
  
  
  
  • 使用 Vue Router 的 router.addRoutes(routes) 方法将天生的路由动态添加到路由实例中。
    
  • 如许只有颠末权限验证的路由才会被添加，从而实现了权限控制。
    
  
  
• 动态渲染菜单：
  
  
  
  • 左侧菜单通常是基于天生的路由表来渲染的，因此只有用户有权访问的路由才会在菜单中体现。
    
  
  

优点

• 安全性：
  
  
  
  • 只有颠末验证的用户才气访问其权限范围内的页面。
    
  • 淘汰了由于硬编码路由导致的安全毛病。
    
  
  
• 机动性：
  
  
  
  • 可以根据用户的权限动态调解应用的布局，无需重新摆设整个应用即可调解路由。
    
  • 支持按需加载（懒加载），进步应用性能。
    
  
  
• 用户体验：
  
  
  
  • 只展示用户可以访问的菜单项，制止体现无用链接，进步用户体验。
    
  • 用户界面更加轻便，只体现与其脚色相干的功能。
    
  
  
• 可维护性：
  
  
  
  • 简化了路由设置，由于不须要为每个脚色单独编写路由设置，而是会合管理权限。
    
  • 更轻易扩展和修改权限设置，只需更新后端的权限数据即可。
    
  
  
• 开发服从：
  
  
  
  • 开发者只须要关注业务逻辑，而不须要关心每个脚色的详细路由设置。
    
  • 淘汰了重复工作，进步了开发服从。
    
  
  

示例

在前导航路由钩子 beforeEach 函数里发送接口哀求获取路由信息
permission.js

1. // permission.js
2. import router from './router'
3. import store from './store'
4. import { Message } from 'element-ui'
5. import { getStore } from '@/utils/store';
7. const whiteList = ['/login', '/404', '/401'];
9. router.beforeEach((to, from, next) => {
10.   let token = getStore('token');
12.   if (token) {
13.     /* has token*/
14.     if (to.path === '/login') {
15.       next({ path: '/' });
16.     } else {
17.       if (store.getters.roles.length === 0) {
18.         // 判断当前用户是否已拉取完user_info信息
19.         store.dispatch('GetInfo').then(() => {
20.           // 获取路由信息
21.           store.dispatch('GenerateRoutes').then((res) => {
22.             console.log('--------------', res);
23.             // 根据roles权限生成可访问的路由表
24.             router.addRoutes(res) // 动态添加可访问路由表
25.             next({ ...to, replace: true }) // hack方法 确保addRoutes已完成
26.           })
27.         }).catch(err => {
28.           store.dispatch('LogOut').then(() => {
29.             Message.error(err)
30.             next(`/`)
31.           })
32.         })
33.       } else {
34.         next()
35.       }
36.     }
37.   } else {
38.     // 没有token
39.     if (whiteList.indexOf(to.path) !== -1) {
40.       // 在免登录白名单，直接进入
41.       next()
42.     } else {
43.       next(`/login`) // 否则全部重定向到登录页
44.     }
45.   }
46. })

复制代码

  permission.js 文件需引入到 main.js 里
  假如项目 vue-router 版本高出 3.3.0, 须要遍历路由数组再使用 router.addRoute() 方法逐个添加路由

1. res.forEach( route => {
2.         router.addRoute(route);
3. })

复制代码

假设后端接口返回的路由权限如下

1. [
2.   {
3.     path: '/admin',
4.     meta: {
5.       title: "系统管理",
6.     },
7.     component: 'Layout',
8.     children: [
9.       {
10.         path: 'user',
11.         name: 'userIndex',
12.         meta: {
13.           title: "用户管理",
14.         },
15.         component: '/admin/user/index.vue'
16.       },
17.       {
18.         path: 'role',
19.         name: 'roleIndex',
20.         meta: {
21.           title: "角色管理",
22.         },
23.         component: '/admin/role/index.vue',
24.         children: [
25.           {
26.             path: 'add',
27.             name: 'addRole',
28.             meta: {
29.               title: "添加角色",
30.             },
31.             component: '/admin/user/index.vue'
32.           },
33.           {
34.             path: 'update',
35.             name: 'updateRole',
36.             meta: {
37.               title: "编辑角色",
38.             },
39.             component: '/admin/role/index.vue'
40.           }
41.         ]
42.       }
43.     ]
44.   },
45.   {
46.     path: '/tableEcho',
47.     meta: {
48.       title: "表格管理",
49.     },
50.     component: 'Layout',
51.     children: [
52.       {
53.         path: 'test',
54.         name: 'tableEchoIndex',
55.         meta: {
56.           title: "表格测试",
57.         },
58.         component: '/tableEcho/index.vue',
59.         children: [
60.           {
61.             path: 'add',
62.             name: 'addTable',
63.             hidden: true,
64.             meta: {
65.               title: "新增测试",
66.             },
67.             component: '/tableEcho/add.vue'
68.           }
69.         ]
70.       },
71.     ],
72.   },
73. ]

复制代码

vuex 处理处罚数据
store/index.vue

1. // store/index.vue
2. import Vue from 'vue'
3. import Vuex from 'vuex'
4. import { routes, dynamicRoutes } from "@/router";
5. import { login, getInfo, logout, getRouters } from "@/api/user";
6. import { setStore, clearStore } from '@/utils/store';
7. import Layout from '@/Layout/index.vue'
9. Vue.use(Vuex)
11. export default new Vuex.Store({
12.   state: {
13.     routes,
14.     token: "",
15.     roleType: "",
16.     roles: [],
17.     permissions: [],
18.     sidebarRouters: [],
20.   },
21.   getters: {
22.     token: state => state.token,
23.     roles: state => state.roles,
24.     permissions: state => state.permissions,
25.     sidebarRouters: state => state.sidebarRouters,
26.   },
27.   mutations: {
28.     SET_TOKEN: (state, token) => {
29.       state.token = token;
30.     },
31.     SET_USERINFO: (state, user) => {
32.       state.userInfo = user;
33.     },
34.     SET_ROLETYPE: (state, roleType) => {
35.       state.roleType = roleType;
36.     },
37.     SET_ROLES: (state, roles) => {
38.       state.roles = roles;
39.     },
40.     SET_PERMISSIONS: (state, permissions) => {
41.       state.permissions = permissions;
42.     },
43.     SET_ROUTE: (state, sidebarRouters) => {
44.       state.sidebarRouters = sidebarRouters;
45.     },
46.   },
47.   actions: {
48.     Login({ commit }, userInfo) {
49.       return new Promise((resolve, reject) => {
50.         login(userInfo).then(res => {
51.           setToken(res.data.token);
52.           setStore('token', res.data.token);
53.           commit('SET_TOKEN', res.data.token);
54.           resolve();
55.         }).catch(error => {
56.           reject(error);
57.         })
58.       })
59.     },
60.     // 获取用户信息
61.     GetInfo({ commit }) {
62.       return new Promise((resolve, reject) => {
63.         getInfo().then(res => {
64.           console.log('res::: ', res);
65.           if (res.data.code === 0 || 200) {
66.             const user = res.data.sysUser;
67.             const roleType = res.data.roleType;
68.             commit('SET_USERINFO', user);
70.             // roleType 用户所用的权限级别 1 普通用户  2 项目经理  3 部门管理员  4 综合部管理员  5  部门领导  -1 项目运维管理员
71.             setStore('ROLE_TYPE', roleType);
72.             if (res.data.roles) { // 验证返回的roles是否为真
73.               commit('SET_ROLES', res.data.roles);
74.               commit('SET_PERMISSIONS', res.data.permissions);
75.             } else {
76.               commit('SET_ROLES', ['ROLE_DEFAULT']);
77.             }
78.             resolve();
79.           } else {
80.             reject(error);
81.           }
82.         }).catch(error => {
83.           reject(error);
84.         })
85.       })
86.     },
87.     GenerateRoutes({ commit }) {
88.       return new Promise((resolve, reject) => {
89.         // 向后端请求路由数据
90.         getRouters().then(res => {
91.           if (res.data.code === 0 || 200) {
92.             const sdata = JSON.parse(JSON.stringify(res.data.routes));
93.             console.log('sdata::: ', sdata);
95.             let newRouters = filterAsyncRouter(sdata);
97.             // 连接公共路由
98.             const sidebarRoutes = routes.concat([...newRouters]);
99.             commit('SET_ROUTE', sidebarRoutes);
100.             resolve(sidebarRoutes);
101.           } else {
102.             reject(error);
103.           }
104.         }).catch(error => {
105.           reject(error);
106.         })
107.       })
108.     },
109.     // 退出系统
110.     LogOut({ commit, state }) {
111.       return new Promise((resolve, reject) => {
112.         logout(state.token).then(() => {
113.           commit('SET_TOKEN', '')
114.           commit('SET_ROLES', [])
115.           commit('SET_PERMISSIONS', [])
116.           clearStore('token');
117.           clearStore('userInfo')
118.           resolve()
119.         }).catch(error => {
120.           reject(error)
121.         })
122.       })
123.     },
124.   },
125.   modules: {
126.   }
127. })
129. const loadView = (view) => {
130.   // 路由懒加载
131.   return () => import(`@/views${view}`);
132. };
134. function filterAsyncRouter(routes) {
135.   return routes.filter((route) => {
136.     if (Array.isArray(route.children) && route.children.length > 0) {
137.       // 如果该路由含有子路由时,递归调用该函数
138.       route.children = filterAsyncRouter(route.children);
139.     }
141.     if (route.component) {
142.       // Layout ParentView 组件特殊处理
143.       if (route.component === "Layout") {
144.         route.component = Layout;
145.       } else {
146.         // 路由组件懒加载
147.         route.component = loadView(route.component);
148.       }
149.     }
151.     return true;
152.   })
153. }

复制代码

  由于接口返回的 component 是字符串, 需手动封装函数转换成组件
  公共路由如下
router/index.js

1. // router/index.js
2. import Vue from 'vue'
3. import VueRouter from 'vue-router'
4. import Layout from '@/Layout/index.vue'
6. Vue.use(VueRouter)
8. // 公共路由
9. export const routes = [
10.   {
11.     path: '/',
12.     name: 'redirect',
13.     component: Layout,
14.     hidden: true, // 隐藏菜单
15.     redirect: "/homePage", // 用户在地址栏输入 '/' 时会自动重定向到 /homePage 页面
16.   },
17.   {
18.     path: '/homePage',
19.     component: Layout,
20.     redirect: "/homePage/index",
21.     meta: {
22.       title: "首页",
23.     },
24.     children: [
25.       {
26.         path: 'index',
27.         name: 'homePageIndex',
28.         meta: {
29.           title: "首页",
30.         },
31.         component: () => import('@/views/homePage/index.vue')
32.       }
33.     ]
34.   },
35.   {
36.     path: '/login',
37.     component: () => import('@/views/login.vue'),
38.     hidden: true
39.   },
40.   {
41.     path: '/404',
42.     component: () => import('@/views/error/404.vue'),
43.     hidden: true
44.   },
45.   {
46.     path: '/401',
47.     component: () => import('@/views/error/401.vue'),
48.     hidden: true
49.   },
50. ]
52. const router = new VueRouter({
53.   base: process.env.BASE_URL,
54.   routes
55. })
57. export default router

复制代码

文件布局如下

页面菜单渲染

   左侧菜单实现参考链接: Elemnt-UI + 递归组件实现背景管理体系左侧菜单
  前端单独实现动态路由参考毗连: 前端单独实现 vue 动态路由
  总结

通过以上步调，你可以实现一个完备的动态路由权限管理体系：

• 后端接口返回路由设置：获取用户的权限信息及路由信息。
  
• 动态加载组件：使用异步组件方式加载指定路径的组件。
  
• 动态添加路由：根据权限信息动态添加路由。
  
• 路由守卫：使用 router.addRoutes() 或 router.addRoute() 添加路由。
  

如许可以确保应用根据用户的权限动态加载相应的路由，增强安全性与机动性。