【vue】使用router.addRoutes动态路由来实现权限管理

功能要求

不同的用户拥有不同的权限表，能打开不同的页面，没有权限的页面将重定向到404
刷新之后数据还在并且还在当前页面

数据

后端返回权限表

"operations": [
          {
              "id": 1,
              "path": "/order",
              "name": "订单管理"
          },
          {
              "id": 2,
              "path": "/goods",
              "name": "商品管理"
          },
          {
              "id": 3,
              "path": "/cate",
              "name": "分类管理"
          },
          {
              "id": 4,
              "path": "/client",
              "name": "客户管理"
          },
          {
              "id": 5,
              "path": "/school",
              "name": "校园管理"
          },
          {
              "id": 6,
              "path": "/store",
              "name": "门店管理"
          },
          {
              "id": 7,
              "path": "/data",
              "name": "经营数据"
          },
          {
              "id": 8,
              "path": "/power",
              "name": "权限管理"
          },
          {
              "id": 9,
              "path": "/refund",
              "name": "退款管理"
          }

代码

router/index.js

//静态路由
export const constantRouterMap = [
  {
        path: '/home',
        name: '首页',
        meta: {
          isLogin: true
        },
        component: Home
  },
  {
    path: '/login',
    name: 'Login',
    meta: {
      isLogin: false
    },
    component: resolve => require(["@/components/Login"], resolve)
  },
  {
    path: '/',
    name: 'Login',
    meta: {
      isLogin: false
    },
    component: resolve => require(["@/components/Login"], resolve)
  },
  {
    path: '/404',
    name: 'Unfind',
    meta: {
      isLogin: false
    },
    component: resolve => require(["@/components/404"], resolve)
  },
]

export default new Router({
  mode: 'history',
  routes: constantRouterMap
})

//动态路由
export const asyncRouteMap = [
        {
          path: '/order',
          name: '订单管理',
          meta: {
            isLogin: true
          },
          component: resolve => require(["@/components/Order"], resolve)
        },
        {
          path: '/goods',
          name: '商品管理',
          meta: {
            isLogin: true
          },
          // component: require('./').default
          component: resolve => require(["@/components/goods/Goods"], resolve)
        },
        {
          path: '/cate',
          name: '分类管理',
          meta: {
            isLogin: true
          },
          component: resolve => require(["@/components/categories/Cate"],
resolve)
        },
        {
          path: '/client',
          name: '客户管理',
          // component: require('./').default
          component: resolve => require(["@/components/client/Client"],
resolve)
        },
        {
          path: '/school',
          name: '校园管理',
          component: resolve => require(["@/components/school/School"],
resolve)
        },
        {
          path: '/store',
          name: '门店管理',
          component: resolve => require(["@/components/store/Store"], resolve)
        },
        {
          path: '/data',
          name: '经营数据',
          component: resolve => require(["@/components/Data"], resolve)
        },
        {
          path: '/power',
          name: '权限管理',
          component: resolve => require(["@/components/power/Power"], resolve)
        },
        {
          path: '/Cate/Management',
          name: '分类详情',
          component: CateMan
        },
        {
          path: '/orderDetail',
          name: '订单详情',
          component: OrderDetail
        }
]

vuex/store.js

var state = {
    routers: constantRouterMap,
    addRouters: [],
    operations: [],
    token: '',
}

var mutations = {
    saveOpera (state, opera) {
        state.operations = opera;
    },
    saveToken(state, token) {
        state.token = token;
    },
    setRouters(state,routers) {
        state.addRouters = routers;
        state.routers = constantRouterMap.concat(routers);
    }
}
var actions = {
    GenerateRoutes({commit},data) {
        return new Promise(resolve => {
            const { operations } = data;
            console.log(operations)
            const accessedRouters = asyncRouteMap.filter(v => {
                for(let i=0;i<operations.length;i++){
                    if(operations[i].path === v.path)return true;
                }
                return false;
            })
            console.log(accessedRouters);
            commit('setRouters',accessedRouters);
            resolve();
        })
    }
}
export default new Vuex.Store({
    state,
    mutations,
    actions
  })

main.js

router.beforeEach((to, from, next) => {
    console.log(store.state.token)
    const operations = store.state.operations;
    console.log(operations);
    store.dispatch('GenerateRoutes', { operations }).then(() => {
      console.log(store.state.addRouters);
      router.addRoutes(store.state.addRouters);
      router.addRoutes([{ path: '*', redirect: '/404', hidden: true
}]);//最后添加 不然一刷新就会定向到404
    })
    next()
})

login.vue

this.$store.commit('saveOpera', res.data.operations);
this.$store.commit('saveToken', res.token);

App.vue

mounted() {
    //在页面加载时读取sessionStorage里的状态信息
  if (!sessionStorage.getItem("token")) {
    this.$Message["error"]({
      background: true,
      content: "请先登录"
    });
    this.$router.push('/login');
  } else {
    this.$store.commit('saveOpera',
JSON.parse(sessionStorage.getItem("operations")));
    this.$store.commit('saveToken', sessionStorage.getItem("token"));
    const operations = this.$store.state.operations;
    this.$store.dispatch('GenerateRoutes', { operations }).then(() => {
      this.$router.addRoutes(this.$store.state.addRouters);
      this.$router.addRoutes([{ path: '*', redirect: '/404', hidden: true }]);
    })
  }

    // 在页面刷新时将vuex里的信息保存到sessionStorage里
    window.addEventListener("beforeunload",e=>{
      sessionStorage.setItem("token",this.$store.state.token)
     
sessionStorage.setItem("operations",JSON.stringify(this.$store.state.operations))
    })
  },
 

• « 上一篇：Linux之父：C++语言很烂 不会改用其重写Linux内核
• » 下一篇：python 实验六 列表与元组（上）