This is the 9th day of my participation in the August More Text Challenge. For details, see:August is more challenging

After the user logs in successfully, the page needs to be displayed, but different users have different permissions. The left sidebar that you can see and the page that can be accessed directly through the URL need to know the permissions of the current login user before you can restrict it.

To do this, we intercept routes in the global hook router.beforeeach to determine whether the token is obtained. After the token is obtained, we need to obtain basic user information

BeforeEach intercepts routes and defines a whiteList that can be accessed without auth after the user has successfully logged in, [‘/login’, ‘/auth-redirect’], Otherwise, the login page cannot be accessed, and the loop is infinite.

Const hasToken = getToken(), getToken(), getToken(), getToken(); If there is no token and the token is in the whitelist, the user directly next. If the token is not in the whitelist, the user goes back to the login page. If there is a token and the destination page is the login page, the user directly jumps to the root directory. Otherwise, determine whether the user can jump to the page according to the user permission. If the user information has been obtained,

const hasRoles = store.getters.roles && store.getters.roles.length > 0
Copy the code

Next, otherwise you need to get the user information.

const { roles } = await store.dispatch('user/getInfo')
Copy the code

Call vuex getInfo, request getInfo interface, get user roles, name, avatar, introduction and commit to modify these attributes in VUex.

return new Promise((resolve, reject) => { getInfo(state.token).then(response => { const { data } = response if (! data) { reject('Verification failed, please Login again.') } const { roles, name, avatar, introduction } = data if (! roles || roles.length <= 0) { reject('getInfo: roles must be a non-null array! ') } commit('SET_ROLES', roles)Copy the code

Then the routing permission of the user is successfully obtained and the generateRoutes method of vuex is called

const accessRoutes = await store.dispatch('permission/generateRoutes', roles)
Copy the code

The user’s permissions are calculated in vuex, and the commit commits SET_ROUTES

commit('SET_ROUTES', accessedRoutes)
Copy the code

In SET_ROUTES, concatenate the routes within the permission for the constantRoutes,

import { asyncRoutes, constantRoutes } from '@/router'
state.routes = constantRoutes.concat(routes)
Copy the code

Then add these routes in beforeEach so that users can see them in the left sidebar and access them directly through the URL. Then next, jump to the page.

router.addRoutes(accessRoutes)
Copy the code

Finally, end the progress bar in the afterEach global hook.

router.afterEach(() = > {
  // finish progress bar
  NProgress.done()
})
Copy the code

At this point, the user’s permission is obtained successfully, and he can access the routes within his permission. Next, learn how to use each plug-in.