Functional requirements

Different users have different permission tables , Can open different pages , Pages without permissions will be redirected to 404
After refreshing, the data is still in the current page

data

Back end return permission table

"operations": [
          {
              "id": 1,
              "path": "/order",
              "name": " Order management "
          },
          {
              "id": 2,
              "path": "/goods",
              "name": " Commodity management "
          },
          {
              "id": 3,
              "path": "/cate",
              "name": " Classified management "
          },
          {
              "id": 4,
              "path": "/client",
              "name": " customer management "
          },
          {
              "id": 5,
              "path": "/school",
              "name": " Campus management "
          },
          {
              "id": 6,
              "path": "/store",
              "name": " Store management "
          },
          {
              "id": 7,
              "path": "/data",
              "name": " Business data "
          },
          {
              "id": 8,
              "path": "/power",
              "name": " Authority management "
          },
          {
              "id": 9,
              "path": "/refund",
              "name": " Refund management "
          }

code

router/index.js

// Static routing
export const constantRouterMap = [
  {
        path: '/home',
        name: ' home page ',
        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
})

// Dynamic routing
export const asyncRouteMap = [
        {
          path: '/order',
          name: ' Order management ',
          meta: {
            isLogin: true
          },
          component: resolve => require(["@/components/Order"], resolve)
        },
        {
          path: '/goods',
          name: ' Commodity management ',
          meta: {
            isLogin: true
          },
          // component: require('./').default
          component: resolve => require(["@/components/goods/Goods"], resolve)
        },
        {
          path: '/cate',
          name: ' Classified management ',
          meta: {
            isLogin: true
          },
          component: resolve => require(["@/components/categories/Cate"],
resolve)
        },
        {
          path: '/client',
          name: ' customer management ',
          // component: require('./').default
          component: resolve => require(["@/components/client/Client"],
resolve)
        },
        {
          path: '/school',
          name: ' Campus management ',
          component: resolve => require(["@/components/school/School"],
resolve)
        },
        {
          path: '/store',
          name: ' Store management ',
          component: resolve => require(["@/components/store/Store"], resolve)
        },
        {
          path: '/data',
          name: ' Business data ',
          component: resolve => require(["@/components/Data"], resolve)
        },
        {
          path: '/power',
          name: ' Authority management ',
          component: resolve => require(["@/components/power/Power"], resolve)
        },
        {
          path: '/Cate/Management',
          name: ' Classification details ',
          component: CateMan
        },
        {
          path: '/orderDetail',
          name: ' Order details ',
          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
}]);// Add last Otherwise, a refresh will be directed to 404
    })
    next()
})

login.vue

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

App.vue

mounted() {
    // Read on page load sessionStorage Status information in
  if (!sessionStorage.getItem("token")) {
    this.$Message["error"]({
      background: true,
      content: " Please log in first "
    });
    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 }]);
    })
  }

    // When the page is refreshed, the vuex Save the information in the sessionStorage in
    window.addEventListener("beforeunload",e=>{
      sessionStorage.setItem("token",this.$store.state.token)
     
sessionStorage.setItem("operations",JSON.stringify(this.$store.state.operations))
    })
  },
 

Technology