First, login authentication, which is to use the common JWT method, speaking of JWT, first a brief introduction to ~

Json web token (JWT), it is to declare transmission between the network application environment and perform a Json based open standards, details on www.jianshu.com/p/576dbf44b…

Besides, according to the authority rendering the page, the traditional page authority refers to systems with zhang SAN, li si, wang2 xiao3 er4 three roles, each person can access to the page is fixed, this implementation has two ways, one is in the heart of the routing yuan role fixed good, return to role on page rendering time according to the backend to generate the menu page, The second method is to dynamically generate routes according to the role returned by the back-end. Of course, both methods also need to perform global route hook matching to prevent manual address input. I won’t go into the details here.

Dynamic rendering permission, as the name implies, the permission here is dynamic. For example, the user can access the page A and B at the beginning, but the user can set the page access permission to A, B, C and D through the Settings in the page. In this way, the traditional way does not take effect. The following is a description of the implementation of the idea ~

1. Routing examples

The page in the routing element here is to prepare the rendering menu according to permissions ~

{ path: 'limitmanage', name: 'limitmanage', component: () => import('@/views/systemManage/limitManage.vue'), meta: {title: 'limitManage ',page:' limitManage '}, show: true},Copy the code

Second, menu rendering

Item is the route object traversed. This. pages is the list of accessible menus returned by users upon successful login. At the same time, this is also the list passed to the back end when dynamically setting page permissions. This Pages is stored in vuex and localStroge, and is updated locally and with back-end data when permissions are changed.

judgeMenu(item){ if (! item) return let result = item.some(el => { return this.pages.indexOf(el.meta.page) ! == -1 }) return result },Copy the code

Global routing hooks

Use the global routing hook to check whether the current address has access permission. If not, go to the default page (this.pagelist [0]).

async judgeRouter(){ await this.judgeLogin() this.$router.beforeEach((to, from, Next) => {// Route global guard if (this.pagelist.indexof (to.meta. Page) == -1 && from. Name! == 'login' && localStorage.getItem('token') && to.name ! Warning ({Message: 'no permission, jump to default page '}) this.$router.push({name: this.pageList[0]})return } next() }) }Copy the code

Note: judgeLogin is used to update the vuex data, because the store data is stored in running memory. When the page is refreshed, the page will reload the Vue instance, and the store data will be reassigned and initialized.

Novice on the road, if you have any questions, thanks for pointing out.