vue权限路由实现的方法示例总结(4)

上面代码是vue-quasar-admin的实现。因为没有使用addRoutes,每次路由跳转的时候都要判断权限，这里的判断也很简单，因为菜单的name与路由的name是一一对应的,而后端返回的菜单就已经是经过权限过滤的，所以如果根据路由name找不到对应的菜单，就表示用户有没权限访问。

如果路由很多，可以在应用初始化的时候，只挂载不需要权限控制的路由。取得后端返回的菜单后，根据菜单与路由的对应关系，筛选出可访问的路由，通过addRoutes动态挂载。

缺点

• 菜单需要与路由做一一对应，前端添加了新功能，需要通过菜单管理功能添加新的菜单，如果菜单配置的不对会导致应用不能正常使用
• 全局路由守卫里，每次路由跳转都要做判断

菜单与路由完全由后端返回

菜单由后端返回是可行的，但是路由由后端返回呢？看一下路由的定义

{
 name: "login",
 path: "/login",
 component: () => import("@/pages/Login.vue")
}

后端如果直接返回

{
 "name": "login",
 "path": "/login",
 "component": "() => import('@/pages/Login.vue')"
}

这是什么鬼，明显不行。() => import('@/pages/Login.vue')这代码如果没出现在前端，webpack不会对Login.vue进行编译打包

实现

前端统一定义路由组件，比如

const Home = () => import("../pages/Home.vue");
const UserInfo = () => import("../pages/UserInfo.vue");
export default {
 home: Home,
 userInfo: UserInfo
};

将路由组件定义为这种key-value的结构。

后端返回格式

[
  {
  name: "home",
  path: "/",
  component: "home"
  },
  {
  name: "home",
  path: "/userinfo",
  component: "userInfo"
  }
]

在将后端返回路由通过addRoutes动态挂载之间，需要将数据处理一下，将component字段换为真正的组件。

至于菜单与路由是否还要分离，怎么对应，可以根据实际需求进行处理。

如果有嵌套路由，后端功能设计的时候，要注意添加相应的字段。前端拿到数据也要做相应的处理。

缺点

• 全局路由守卫里，每次路由跳转都要做判断
• 前后端的配合要求更高

不使用全局路由守卫

前面几种方式，除了登录页与主应用分离,每次路由跳转，都在全局路由守卫里做了判断。

实现

应用初始化的时候只挂载不需要权限控制的路由

const constRouterMap = [
 {
 name: "login",
 path: "/login",
 component: () => import("@/pages/Login.vue")
 },
 {
 path: "/404",
 component: () => import("@/pages/Page404.vue")
 },
 {
 path: "/init",
 component: () => import("@/pages/Init.vue")
 },
 {
 path: "*",
 redirect: "/404"
 }
];