vue 通过vue router 动态添加路由来实现权限管理

1,需求:

          需要判断超级管理员和普通管理员的权限,不同管理员有不同的页面,通过一个登录页登录

2,思路:

          1,提前写好超级管理员和普通管理员的路由表

          2,在登录的时候,登录成功哪个管理员就添加哪个管理员的路由表

3,实现:

          1,先定义基本的路由表:router.js

import Vue from "vue";
import Router from "vue-router";

Vue.use(Router);

export default new Router({
  routes: [
    {
      path: "/login",
      name: "login",
      component: () => import("./views/Login.vue"),
      meta: {
        mingcheng: "登录",
        key: "login"
      }
    },
    {
      path: "/",
      name: "/",
      redirect: "/login"
    }
  ]
});

           2,定义超级管理员的路由表

let groupRouter = [
  {
    path: "/",
    name: "index",
    component: () => import("@/views/BasePage.vue"),
    redirect: "/home",
    children: [
      {
        path: "/home",
        name: "home",
        component: () => import("@/views/Home.vue"),
        meta: {
          mingcheng: "首页",
          key: "home",
          level: 1
        }
      },
      {
        path: "/*",
        name: "/*",
        redirect: "/404"
      }
    ]
  }
];
export default groupRouter;

           3,在登录成功的时候,添加路由表

//管理员路由表
import groupRouter from "@/router/group.js";

//登录成功之后
switch (res.data.content.type) {
                case "groupAdmin":
                  this.$router.addRoutes(groupRouter);
                  break;
              }

       4,这样就成功一半了,但此时会遇到一个奇怪的问题:刷新以后,之前路由表就没了

        解决方法就是在main.js里面每次刷新就判断一下,如果没有就再次添加

//组团管理员路由表
import groupRouter from "@/router/group.js";
new Vue({
  router,
  render: h => h(App),
  created() {
    //这里我登陆成功以后的信息存在本地
    let user_token = localStorage.logininfo
      ? JSON.parse(localStorage.logininfo).content.type
      : null;
    //如果登录了,添加响应的路由
    if (user_token) {
      switch (user_token) {
        case "groupAdmin":
          this.$router.addRoutes(groupRouter);
          break;
      }
    } else {
      //如果没有路由,添加所有都指向登录页
      this.$router.addRoutes([
        {
          path: "*",
          redirect: "/login"
        }
      ]);
      this.$router.push("login");
    }
  }
}).$mount("#app");

     5,这样算是成功了一大半,但是依然有一个问题:退出的时候,并不能清空路由表,因为vue router没有这个功能

        解决思路:在退出到登录页的时候,刷新登录页面

//退出方法
    loginout() {
      new Promise(res => {
        localStorage.clear();
        this.$router.push("/login");
        res(200);
      }).then(() => {
        location.reload();
      });
    },

6,页面超时的时候,也需要判断一下

//axios 响应 拦截器
axios.interceptors.response.use(
  res => {
    //登录失效
    if (res.data.code === "error_unauth") {
      new Promise(res => {
        localStorage.clear();
        router.push("/login");
        res(200);
      }).then(() => {
        location.reload();
      });
    }
    return res;
  },