Vue 动态路由的实现(后台传递路由，前端拿到并渲染)_后端返回一个路由表,前端怎么操作

很多时候我们在项目的路由都是在前端配置好的，但是有的时候为了进行全面的权限控制，会需要后台给出路由表，前端再渲染。不用在前端配置。

vue项目实现动态路由的方式大体可分为两种:
1.前端这边把路由写好，登录的时候根据用户的角色权限来动态展示路由，(前端控制路由)
2.后台传来当前用户对应权限的路由表，前端通过调接口拿到后处理(后端处理路由)
大体步骤：拦截路由->后台取到路由->保存路由到localStorage(用户登录进来只会从后台取一次，其余都从本地取,所以用户，只有退出在登录路由才会更新)

先设置路由规则：

const roles1 = [
  {
    path: '/home',
    name: 'Home',
    component: 'Home',
  },
  {
    path: '/about',
    name: 'About',
    component: 'About',
  },
];
const roles2 = [
  {
    path: '/home1',
    name: 'Home1',
    component: 'Home1',
  },
  {
    path: '/about1',
    name: 'About1',
    component: 'About1',
  },
];
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24

后端返回数据：

app.post('/login', (req, res) => {
  // 一般在项目里面是判断角色，角色是分配权限的，一般一个项目里面只有几个角色,不同角色能看到的路由页面也不一样
  // 比如 校长(50) + 教学总监（40） + 导师(30) + 班主任(20) + 学生(10)
  if (req.body.roler === 'xiaozhang') {
    res.send({
      msg: '登录成功',
      token: 'Bearea sdfa.sfdssf.sdfsdf',
      ROLE: 'admin/xiaozhang/banzhur/xuesheng',
      roles: [...roles1, ...roles2], //※※※
    });
  } else if (req.body.roler=== 'xuesheng') {
    res.send({
      msg: '登录成功',
      token: 'Bearea sdfa.sfdssf.sdfsdf',
      roles: roles1, //※※※
    });
  }
});
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18

登录获取路由

 async login() {
      const { data: res } = await axios.post('/api/login', { roler: 'xiaozhang'});
      // 给需要权限的接口 添加 token属性到  Authrization 这个字段； 需要到请求拦截器里面添加
      // 登录成功以后，还需要根据返回值，动态添加路由；因为不同的人登录系统，不同的权限，返回的内容也不一样
      this.setToken(res.token);
      // 现在我们要将字符串Home，转换为 函数 () => import('../views/Home.vue'),
      res.roles.forEach((item) => {
        item.component = this.transformFn(item.component);
      });
      this.$router.addRoutes(res.roles); //※※※
      this.$router.push('/home');
    },
1
2
3
4
5
6
7
8
9
10
11
12

封装将路由home字符串形式转为路由的函数

transformFn(componentName) {
      return () => import('@/views/' + componentName + '.vue');
    },
1
2
3