According to the authority system analysis
One: Story Background
Recently, I am researching the permission system. Adhering to the principle of standing on the shoulders of giants, I learned Zoyi's permission project. The front-end and back-end separation versions are selected here. To study the control of the interface and the control of the elements in the page. Check out its specific implementation method and summarize it here.
Two: specific authority control
According to authority control, it is mainly divided into two parts, the first part is the control of the page, and the second part is the control of specific elements on the page.
- In Zoe's system, all elements can be seen in the menu management. There are two types of elements. One is the page, and the other is the element is the specific element in the page.
- No matter what kind of element it is, we can customize the corresponding permission identifier , and use the permission representation to indicate whether the user has specific permissions.
2.1 Page permission control
Page authority control is configured through dynamic routing. Let's take a look at the entire process of implementing dynamic routing from the front end to the back end.
- The permission file in the src directory , the code here means the global pre-guard in VueRouter, which is used to perform some logical operations before routing switching.
First determine that the user has logged in and has a corresponding token, then pull the user's information, and then trigger the GenerateRoutes method of Vuex to pull the specific routing information from the backend
- The GenerateRoutes method of Vuex mentioned above is defined in the src.store.modules.permission.js file. Note that it is different from the above file. The directory of the two is different.
This part of the code goes to the backend to query the user’s routing permissions and other information, and returns the generated accessible routing configuration as a Promise result.
After returning, the code in the first part dynamically configures the accessible routes into Vue Router. - The following is the data structure returned by the request routing data
{
"msg": "操作成功",
"code": 200,
"data": [
{
"name": "System",
"path": "/system",
"hidden": false,
"redirect": "noRedirect",
"component": "Layout",
"alwaysShow": true,
"meta": {
"title": "系统管理",
"icon": "system",
"noCache": false,
"link": null
},
"children": [
{
"name": "User",
"path": "user",
"hidden": false,
"component": "system/user/index",
"meta": {
"title": "用户管理",
"icon": "user",
"noCache": false,
"link": null
}
},
{
"name": "Role",
"path": "role",
"hidden": false,
"component": "system/role/index",
"meta": {
"title": "角色管理",
"icon": "peoples",
"noCache": false,
"link": null
}
},
{
"name": "Menu",
"path": "menu",
"hidden": false,
"component": "system/menu/index",
"meta": {
"title": "菜单管理",
"icon": "tree-table",
"noCache": false,
"link": null
}
},
{
"name": "Dept",
"path": "dept",
"hidden": false,
"component": "system/dept/index",
"meta": {
"title": "部门管理",
"icon": "tree",
"noCache": false,
"link": null
}
},
{
"name": "Post",
"path": "post",
"hidden": false,
"component": "system/post/index",
"meta": {
"title": "岗位管理",
"icon": "post",
"noCache": false,
"link": null
}
},
{
"name": "Dict",
"path": "dict",
"hidden": false,
"component": "system/dict/index",
"meta": {
"title": "字典管理",
"icon": "dict",
"noCache": false,
"link": null
}
}
]
}
]
}
2.2 Page element permission control
-
Page element control, the corresponding control through the permission id, in the permission system of Ruoyi, two Vue commands, v-hasPermi and v-hasRole, are defined. They are used to control the processing of operation permissions and role permissions respectively.
-
When the user logs in, the getInfo interface will be called to obtain the field of the user's corresponding permission id, and store it in the state of vuex, and the specific user permission information obtained by getUserInfo can be obtained in other components through getters of Vuex
-
When the page is authenticated, the corresponding authentication is directly performed through v-hasPermi. If the user returns the corresponding permission id, the user has specific operation permissions for this control
Three: Realize front-end authentication
Based on Ruoyi, I encapsulated a front-end authentication method myself. Routing authentication is realized by calling the Ruoyi permission interface and secondary development interface.
This implementation mainly involves the following aspects:
1. Encapsulating js to interact with the permission system.
2. Use vuex to realize state management and manage the routing paths accessible to users
. 3. Global routing guards to realize authentication
3.1 Encapsulate js and interact with permissions
Here I encapsulate two kinds of js to interact with the permission system, one is to use axios, and the other is to use the uni-request of the uni-app framework to access.
3.1.1 uni-app comes with uni-request to interact with permissions
//使用uni.request方式发送http请求
//登陆获取token
const AUTH_LOGIN_URL= "http://localhost:8000/auth/login"
//获取用户权限
const AUTH_USERINFO_URL="http://localhost:8000/auth/getResource"
//返回token值等数据
const state = {
//token值
token:'',
//路由
routes:[],
//权限id
permissions:[]
}
//登陆获取token,以及用户权限
export function getAuth(data) {
return new Promise((resolve, reject) => {
sendRequest(AUTH_LOGIN_URL, 'post', data)
.then(response => {
// 请求token返回值
console.log("response",response);
state.token = response.data.token;
console.log("token",data);
getUserInfo(state.token).then(userRespone=>{
state.permissions = userRespone.data.permissions;
state.routes = userRespone.data.component;
resolve(state)
})
})
.catch(error => {
// 请求发生错误，进行错误处理
console.error(error);
reject(error); // 将错误传递给调用者
});
});
}
//通过token获取用户权限
function getUserInfo(token){
return new Promise((resolve, reject) => {
sendRequest(AUTH_USERINFO_URL, 'get', null,token)
.then(response => {
// 请求token返回值
console.log("请求路由权限成功",response)
resolve(response); // 将结果传递给调用者
})
.catch(error => {
// 请求发生错误，进行错误处理
console.error("发生错误",error);
reject(error); // 将错误传递给调用者
});
});
}
function sendRequest(url, method, data, token) {
return new Promise(function(resolve, reject){
uni.request({
url: url,
method: method,
data: data,
header: {
'Authorization': 'Bearer ' + token // 设置 Authorization 头部
}
}).then(responses=>{
// 异常
if (responses[0]) {
reject({
message : "网络超时"});
} else {
resolve (responses[1]);
}
}).catch(error =>{
reject(error);
});
})
}
This js specifically interacts with the permission system, querying the user's token, user permissions, and so on. I mainly define 3 attributes here. token, routers, permissions, use these three to implement authentication on routing and page elements. Of course, we can also add interface authentication, etc.
3.2 vux state management
After querying the corresponding permissions as mentioned above, we can save the state by using vuex, which is beneficial to use in our project.
3.2.1 Custom Status
By customizing the state, define the state that should be saved by vuex
import {
getAuth } from "./uniCallAuth"
const permission ={
//各种状态
state: {
token:'',
routes: [],
permissions:[]
},
mutations:{
//获得权限token
AUTH_TOKEN: (state,token) =>{
state.token = token
},
AUTH_PERMISSIONS: (state,permissions) =>{
state.permissions = permissions
},
AUTH_ROUTERS: (state,routes) =>{
state.routes = routes
}
},
actions:{
getUserAuth({
commit},data){
return new Promise(resolve => {
getAuth(data).then(userData=>{
console.log("userData",userData)
//提交相关的状态
commit('AUTH_TOKEN',userData.token);
commit('AUTH_ROUTERS',userData.routes);
commit('AUTH_PERMISSIONS',userData.permissions);
console.log("用户状态已提交");
resolve();
})
})
}
}
}
export default permission
3.2.2 Add our new state management in the store configuration of vuex
Specific methods of using the state;
3.3 Global routing guard authentication
When the user logs in, the authentication is performed by calling the authority. After the authentication, vuex stores the corresponding authority status. We define the method to authenticate the global route.
Vue.prototype.$bus = new Vue();
Vue.prototype.$bus.$on('uniNavigateTo', options => {
// 全局路由守卫的具体逻辑
console.log("全局路由守卫起作用",options);
let newString
//截取url防止get请求拼参
if(options.url.includes('?')){
newString = options.url.substring(0, options.url.indexOf('?'));
}else{
newString = options.url;
}
//登陆页面直接跳转
if(newString == '/pages/views/user/phoneLogin' || newString =='/pages/views/seller/NotLogin'){
console.log("普通页面直接跳转");
uni.navigateTo(options);
return;
}
console.log("newString",newString);
//判断是否具有页面跳转权限
if(! checkRouter(newString,store.state.permission.routes)){
// uni.showToast(String("没有权限"));
console.log("无法跳转uniNavigateTo",store.state.permission.routes);
return;
}
console.log("应该跳转页面");
uni.navigateTo(options);
});
Vue.prototype.$bus.$on('uniSwitchTab', options => {
console.log("底部全局路由守卫起作用",options);
//截取url防止get请求拼参
let newString
//截取url防止get请求拼参
if(options.url.includes('?')){
newString = options.url.substring(0, options.url.indexOf('?'));
}else{
newString = options.url;
}
//判断是否具有页面跳转权限
if(! checkRouter(newString,store.state.permission.routes)){
// uni.showToast(String("没有权限"));
console.log("无法跳转uniSwitchTab");
return;
}
console.log("应该跳转页面");
uni.switchTab(options);
});
Four: Summary and Improvement
This article realizes the authentication of its own project by studying the authority of the Ruoyi system, and carries out the corresponding secondary development on the basis of Ruoyi. Clarified the way of front-end authentication and implemented it. If you need front-end authentication, you can refer to it.