持续创作，加速成长！这是我参与「掘金日新计划 · 6 月更文挑战」的第4天，点击查看活动详情

在前端开发中，不同的用户账号赋予不同的权限，然后我们根据用户登录之后返回的不同用户权标记进行展示不同的页面，前端动态路由都是和前端路由鉴权相结合实现，我们这篇文章只讲动态路由的实现

我们直接渲染全部的页面然后在跳转页面的时候通过路由函数去判断不就可以阻止用户跳转了吗，为什么要采用动态路由呢？

什么叫做动态路由

一个路由地址对应着一个页面的展示，路由表包含了所有的路由地址，跳转不同的路由地址去渲染不同的页面，而路由表是可以进行手动进行操作修改的，所以被称为动态路由

为什么要采用动态路由

用户按照常规操作，点击按钮进行跳转，我们通过路由函数判断用户权限是否跳转过去展示页面，这样是没有问题的，如果用户通过地址栏跳转，我们路由函数是无法检测到的，这个时候就出现问题了，用户本无权限访问的页面，现在却能通过地址栏跳转进行访问，我们应该避免这种情况的发生；这个时候我们就可以采用动态路由，页面根据用户权限进行自动生成，就不存在用户可以通过地址栏的方式进行跳转无权限的页面了,跳转无路由的页面全部都定向到404页面

动态路由的实现

动态路由的实现分为前端实现和后端实现，今天我们做的是前端实现;

我们先创建一个公共的路由表，然后在根据不同的用户权限数量创建不同的路由表，公共路由表是不需要权限访问的，权限路由表是用户必须登录之后才可以进行访问，登录成功之后根据后端返回的用户权限，动态的当前路由表里面进行添加权限路由，形成一个完整的路由表.

graph TD
用户跳转页面 --> 判断是否登录
判断是否登录--> 未登录-->跳转登录页面-->
用户登录成功-->
判断后端返回的权限-->管理员-->生成路由表
判断后端返回的权限-->普通用户-->生成路由表
判断是否登录 --> 已登录-->判断用户是否拥有该页面权限-->无权限-->404页面
判断用户是否拥有该页面权限-->有权限-->展示页面

我们根据以上流程图来实现一下

公共路由表

//公共路由表
const commonRouterMap = [
  { path: '/login',
    meta: { title: '登录', noCache: true },
    component: (resolve) => require(['@/views/login'], resolve),
  },
  {
    path: '/404',
    component: (resolve) => require(['@/views/features/404'], resolve),
  },
  {
    path: '/401',
    component: (resolve) => require(['@/views/features/401'], resolve),
  },
  {
    path: '/redirect',
    component: Layout,
   component: (resolve) => require(['@/views/features/redirect'], resolve)
  },
  {
    path: '/',
    component: Layout,
    redirect: '/dashboard',
    component: (resolve) => require(['@/views/home'], resolve),
  }
]

管理员路由表

//管理员路由表
const adminRouterMap = [
  {
    path: '/admin',
    component: (resolve) => require(['@/views/admin/index'], resolve)
  },
   {
    path: '/hr',
    component: (resolve) => require(['@/views/hr/index'], resolve)
  },
    {
    path: '/allocation',
    component: (resolve) => require(['@/views/allocation/index'], resolve)
  },
    {
    path: '/birth',
    component: (resolve) => require(['@/views/allocation/index'], resolve)
  },
  
]

普通用户路由表

//普通用户路由表
const ordinaryRouterMap = [
  {
    path: '/user',
    component: (resolve) => require(['@/views/user/index'], resolve)
  },
  {
    path: '/order',
    component: (resolve) => require(['@/views/order/index'], resolve)
  },   
  {
    path: '/cashier',
    component: (resolve) => require(['@/views/cashier/index'], resolve)
  },
   {
    path: '/biology',
    component: (resolve) => require(['@/views/biology/index'], resolve)
  },
]

动态添加路由方法

//router.js
export function addRouter(type) {
    //必须传值且为数字
    if (!type && typeof type != 'number') {
        throw 'type必须为数字'
        return;
    };
    //[管理员路由表,普通用户路由表]
    const RouterList = [adminRouterMap, ordinaryRouterMap][type];
    //用于存放路由表
    const router = [];
    //防止报错，阻止代码运行
    try {
        //进行遍历
        RouterList.forEach(e => {
            //存放新的路由表
            let route = {
                path: e.path,
                component: e.component
            }
            // 添加进去当前的路由表
            router.push(route)
        })
    } catch (error) {
        // 报错处理
        console.error(error)
        //必须有一个返回值
        return []
    }
    return router;
}

用户在登录页面登录成功之后的操作

 <span @click="login">登 录</span>

//我们登录成功后根据后端登录接口返回的权限进行合并路由表
import { addRouter } from '@/utils/router'
import Router from 'vue-router'

login(){
//登录成功后进行跳转到主页
login().then(res=>{
this.type=res.data.type;
this.$router.push('/home');

})
},
//当前页面的路由守卫拦截
Router.beforeEach((to, from, next)=>{
//判断当前页面是否为登录页,不是登录页进行
if(to.path!='/login'){
//根据后端返回的字段进行获取权限路由
    const RouterList =addRouter(type);
    //添加到当前路由表中
    Router.addRoutes(RouterList) 
}
//跳转页面
next()
})

夏天到了，聊一聊Vue的动态路由

什么叫做动态路由

为什么要采用动态路由

动态路由的实现