In the development of the management background, authority control is too normal, we are how to achieve it? I use an apithis.$router. AddRoutes API in vue to implement this.

1. Create a basic route page

Const routes = [{name: 'login',// path: '/', component: () => import('../view/login/login.vue'),}, /** * Path: '/redirect', Component: () => import('../view/redirect/redirect.vue') }] const router = new Router({ mode: "hash", routes })Copy the code

2. The login page

Let me do a little simulation here

methods: { login() { Axios.get('getLogin? [{name: 'index', path: '/index', component: '/index', component: '/index', component: '/index' () => import('../view/index.vue'), children: [{ name: 'city', path: '/index/city', component: () = > import ('.. / view/city/city. The vue '), meta: {title: 'select cities'}}}],] * /}) let asyncroutes = data. The data. The routes; this.$store.commit('setRoutes',asyncroutes); This.$router. AddRoutes (asyncroutes); // Use this API to dynamically add route this.$router.push("/index"); // Successful login, jump to the response page},},Copy the code

The problem is that when we refresh our browser, the routing list will be cleared. To solve this problem, I use an intermediate jump page and determine whether there is a routing address in vuex every time in beforeEach

Intermediate skip

Created (){this.$router.push('/index');Copy the code

Route navigation controls guard judgment

router.beforeEach((to, from, Next) = > {the if (store. State. ModulesA. Routes. Length < = 0) {Axios. Get (' getAuthor). Then (data = > {/ / this is a let access permissions interface asyncroutes=data.data.routes; store.commit("setRoutes", asyncroutes); router.addRoutes(asyncroutes); next('/redirect'); } } else { next() } })Copy the code