Preface
For a long time, when we use vue for background management, the permission functions of different roles are our long-lasting problems. In this article, I will take you to implement the user role permission functions in background management of vue!
Functional Analysis
In common management systems, super administrators will assign roles to each user, which is conducive to the administrator role, editor role, and administrative role. When different roles are logged in, we have different side navigation, and the routes that can be accessed are also different.
Implementation ideas
There are two common ways to identify roles:
1 static
In simple terms, the front-end will fix all navigation data and all routes on the front-end. Each navigation and route has a role attribute that represents what roles can be accessed by the current route or the current navigation. When logging in, the interface returns the user role role, for judgment and filtering, and to achieve authentication.
2 Dynamic
The front-end defines the basic route, and the user's navigation data and routing data are stored in the database. When the user logs in, the request interface to obtain the routes and menus that the current user can access. The front-end gets the data and dynamically renders the navigation, and dynamically adds it to the route through the vue route addRoute method.
Code implementation
This article will combine vuex to help you realize static role authentication step by step (dynamic role authentication will be explained later)
Vuex defines the user module to store user information and user side navigation data
// Introduce encapsulated login model functionimport doLogin from '@/api'
export default {
namespaced: true,
state: {
//User information is backed up to prevent refreshing by using cache information. When obtaining values, judge cache acquisition // Basic information of users such as nickName nickname and avatar user avatar userInfo: ('userInfo')
?
(('userInfo'))
:
{}
,
// The token key returned by login token: ('token') || '',
// The current user's role role: ('role') || '',
// All navigations are examples menus: [
// Each navigation adds roles attribute to indicate that you can access all roles of the current user {
label: 'Dashboard',
path: '/dashBoard',
roles: ['admin', 'a', 'b', 'superAdmin'],
icon: 'el-icon-s-data'
},
{
label: 'Commodity Management',
path: 'el-icon-s-goods',
icon: 'el-icon-s-data',
roles: ['admin', 'a', 'b', 'superAdmin']
},
{
label: 'Personal Center',
path: '/user',
roles: ['admin', 'a', 'b', 'superAdmin'],
icon: 'el-icon-user-solid'
},
{
label: 'set up',
path: '/setting',
roles: ['a', 'b', 'superAdmin'],
icon: 'el-icon-s-tools'
}
]
},
getters: {
authMenus (state) {
// Define getters to filter navigation that cannot be accessed by the current user's role // This is the navigation that the current user role can access return (menu=> ())
}
},
mutations: {
INIT_LOGIN (state, {userInfo, token, role}) {
// Login successfully Store user information = userInfo
= token
= role
// Cache to prevent the refresh vuex state from being lost ('userInfo', (userInfo))
('token', token)
('role', role)
}
},
actions: {
DO_LOGIN ({commit}, params) {
// Send a request in the action to log in doLogin(params).then(res => {
if( === 200) {
// The request successfully triggers the mutation to store user information, including role commit('INIT_LOGIN', {
userInfo: ,
token: ,
role:
})
}
})
}
}
}Add roles to router meta to define all roles that can be accessed by the current route.
const routes = [
{
path: '/',
component: Admin,
meta: {
roles: '*' // * All roles are accessible },
children: [
{
path: '/',
redirect: '/dashBoard',
meta: {
roles: ['admin', 'a', 'b', 'superAdmin']
}
},
{
path: '/dashBoard',
name: 'Dashboard',
component: () => import('_views/DashBoard'),
meta: {
roles: ['admin', 'a', 'b', 'superAdmin']
}
},
{
path: '/itemLists',
name: 'Commodity Management',
component: () => import('_views/Items'),
meta: {
roles: ['admin', 'a', 'b', 'superAdmin']
}
},
{
path: '/itemAdd',
name: 'Add product',
component: () => import('_views/Items/components/ItemAdd'),
meta: {
roles: ['admin', 'a', 'b', 'superAdmin']
}
},
{
path: '/itemUpdate',
name: 'Modify the product',
component: () => import('_views/Items/components/ItemUpdate'),
meta: {
roles: ['admin', 'a', 'b', 'superAdmin']
}
},
{
path: '/cateLists',
name: 'Classification Management',
component: () => import('_views/Cate'),
meta: {
roles: ['admin', 'a', 'b', 'superAdmin']
}
},
{
path: '/user',
name: 'Personal Center',
component: () => import('_views/SetUser'),
meta: {
roles: ['admin', 'a', 'b', 'superAdmin']
}
},
{
path: '/setting',
name: 'set up',
component: () => import('_views/Setting'),
meta: {
roles: ['a', 'b', 'superAdmin']
}
}
]
},
{
path: '/login',
component: () => import('_views/Login'),
meta: {
roles: '*'
}
},
{
path: '*',
component: () =>
import('_views/NotFound'),
meta: {
roles: '*'
}
},
{
path: '/noAuth',
component: () =>
import('_views/Nopermission'),
meta: {
roles: '*'
}
}
]router adds first priority to routes and performs permission blocking
((to, from, next) => {
//Login authentication if ( !== '/login') {
if (isLogin()) {
/*
After successful login
Determine the role of the current user and whether the current route can be accessed
If possible, let it go
Can't go to this page without permission
*/
if ( === '*') {
// All users can access it directly next()
} else {
// Determine whether roles contain the user's role const role = ('role') || ''
if ((role)) {
next()
} else {
// Go to this page without permissions. This is a route without permissions. You need to create one by yourself. next('/noAuth')
}
}
} else {
next('/login')
}
} else {
next()
}
}Side navigation page Use authMenus in getters to loop side navigation
<el-menu @select="choseMenu">
<div v-for="nav in $['user/authMenus ']" :key="">
<el-menu-item :index="" @click="switchNav(, )" v-if="!">
<i :class=""></i>
<span slot="title">{{}}</span>
</el-menu-item>
<el-submenu :index="" v-if="">
<template slot="title">
<i :class=""></i>
<span>{{}}</span>
</template>
<el-menu-item
v-for="subNav in "
:key=""
:index=""
@click="switchNav(, )">{{}}</el-menu-item>
</el-submenu>
</div>
</el-menu>The last step: Call the action requesting login when logging in on the login page.
this.$('user/DO_LOGIN',{
userName: 'xxx',
pwd: 'xxxx'
})Summarize
This is the article about how to use Vuex to implement role authentication in Vue background management. For more related content on Vuex to implement role authentication, please search for my previous articles or continue browsing the related articles below. I hope everyone will support me in the future!