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
©2020 ioDraw All rights reserved
0.96OLED display -4 Line SPI explain C++11 of std::function,std::bind,std::placeholdersJavaScript study ( Function declaration and parameters )QTabWidget Style sheet settings The project passed idea Package and publish to tomcat The server postman Interface test get timestamp and MD5 encryption react Background management configuration route and sidebar :python Simple game code -10 Minutes Python Write a snake game , simple You know? Python What does the foundation include ? Learn something ?10 individual Python Introduction to crawler