The authority of background management system and the idea of vue processing authority

Generally speaking, only in the (background) management system (the earliest enterprise level project and website background management system, which is now called background management system by most people). Permissions are divided into function level permissions and data level permissions. This article focuses on functional level permissions.

1, Explanation of terms:

The meaning of authority needs no further explanation.

  • Function level permissions:
    It means that different roles (or users) see different functions after entering the system, or the functions that can be operated are different. The processing idea of some systems is: the functions that cannot be operated will not be seen by you at all; The processing idea of some systems is: you can see all the functions, but the pages of some functions can't be seen at all and can't be operated. Of course, I personally think the former is better.
    For example, in HIS system, doctors can prescribe. Nurses can't.
  • Data level permissions:
    Indicates that you can enter a function. however
    1. You may not be able to see all the data
    2. You may not be able to add, delete, modify or query the data you see.
    For example, you can only add and delete your own attendance data in the system. However, the HR sister can see everyone's attendance data, and can also make modifications and other operations.

2, Idea of (function level) authority processing in background management system

1. There is no front-end era (if the front-end people can't understand it, they can skip this part)

The era without front end can be regarded as the era of full stack. At that time, programmers had to complete all the functions of the front and back end. Although it is a rich client (front-end), it is nothing compared with the era when the front-end is popular.

Therefore, there are back-end programs to handle permissions. The back-end program combines the database to deal with the of permissions.

Idea:

1) Tables need to be created in the database, generally including:

Menu: stores all the functions of the management system

Role table: it stores the roles of the whole project, which are actually the roles in the company, such as general manager, marketing manager, marketing specialist, project manager, programmer, etc.

Corresponding table of roles and functions: This indicates what roles have what functions.

User table: all users who can log in to the management system, and their roles will be stored in the user table. this

In this way, there is a relationship between users and functions

2) (back end) program, according to the logged in user name, get the corresponding function of the user along the steps of user name -- > role -- > function. Then, just display these functions in the area of the navigation bar, that is, after logging in, users can only see the ideas of their own functions.

2. At present, the front-end is popular:

Now, the front and rear ends are separated. Therefore, permissions can be processed by the back-end or the front-end.

1) I. idea of backend processing permission:

Login function -- > enter user name and password -- > the front end sends user name and password -- > the back end receives user name and password -- > find database (verify user name and password) -- when the verification passes -- > find database (user name -- > role -- > function) - > get the function of the user -- > send it to the front end -- > the front end displays the function circularly according to the obtained function.

2) I. The idea of front-end processing permission (not recommended):

First of all, you need to save the permissions in the front end, which will write to death. Therefore, not recommended. The following is the idea:

Login function -- > enter the user name and password -- > the front end sends the user name and password -- > the back end receives the user name and password -- > find the database (verify the user name and password) -- when the verification passes -- > return to the front end (at the same time, return to the role) - > the front end displays the corresponding functions according to the function permissions corresponding to the role.

3, Use vue to complete the (function level) authority of the background management system:

Here, the "idea of back-end processing permission" is still used. The front end is only used to show the function permission as an example for description.

Use the addRoutes of Vue router to dynamically change the routing configuration.

1. Steps

1) In the default routing configuration, only the login configuration is available.

import Vue from 'vue';
import VueRouter from "vue-router";
import Login from "@/pages/Login";
Vue.use(VueRouter); //Install Vue router to Vue.
// Create Vue router object
let router = new VueRouter({
    mode: "hash", //Routing mode
    routes: [{
            path: "/",
            redirect: "/Login"
        },
        {
            path: "/Login",
            component: Login
        }
    ]
});

export default router;

2) After successful login, the back-end returns the function permission. It is better to directly configure the route. If not, the front-end processes the function permission into the json array format of the route configuration. Use the addRoutes method of Vue router object to dynamically add the route configuration to the route object. At the same time, save the routing configuration in sessionStorage (to prevent the loss of routing configuration after front-end refresh).

axios({
    url: `/roles`,
    method: "get",
    params: {
        username: this.username,
        userpass: this.userpass
    }
}).then(res => {
    let roles = res.data[0].data;
    //this.allRoutes refers to all routing configurations and can be placed in vueX. The following code generates the routing configuration corresponding to the user according to the permissions returned by the back end
    let currRoutes = this.allRoutes.filter(item => {
        return roles.some(obj => obj.path == item.path);
    });
    //Save the obtained permissions to sessionStorage
    sessionStorage.setItem("roles", JSON.stringify(roles));
    //Dynamically add the obtained permissions to the Vue router object
    this.$router.addRoutes(currRoutes);
    this.$router.push("/Home");
});

3) . in the created in "App.vue", the front end needs to read the route configuration saved in the cookie or sessionStorage. Similarly, it needs to read the route configuration and dynamically add the route configuration to the route object by using the addRoutes method of Vue router object. In this way, when refreshing the page, you can get the routing permission of the current user here.

created() {
    this.roles = JSON.parse(sessionStorage.getItem("roles"));
    if (this.roles) {
        //this.allRoutes refers to all routing configurations and can be placed in vueX. The following code generates the routing configuration corresponding to the user according to the permissions returned by the back end
        let currRoutes = this.allRoutes.filter(item => {
            return this.roles.some(obj => obj.path == item.path);
        });
        this.$router.addRoutes(currRoutes);
    }
}

2. Special attention:

Be sure to store the obtained permission array in sessionStorage. Otherwise, the routing configuration will be lost when the page is refreshed.

The above steps have passed the test.

 

Private letter I receive a full set of source code

 

Posted by leung on Mon, 02 May 2022 04:15:20 +0300