Generally speaking, in the (background) management system (the earliest enterprise project and website background management system is now most people are called background management system) will have authority to say. Rights are classified into function-level rights and data-level rights. This article focuses on functional-level permissions.

I. Explanation of nouns:

I don’t need to explain what permission means.

  • Function-level rights: Different roles (or users) can view different functions or operate different functions after accessing the system. In some systems, the idea is that functions that don’t work won’t be shown at all; In some systems, the idea is that you can see all the functions, but some functions are not visible at all. Of course, PERSONALLY, I think the former is better. For example, in HIS system, doctors can write prescriptions. Nurses can’t.
  • Data-level permission: indicates that you can access certain functions. But 1, may not be able to see all the data 2, to see the data may not be able to add, delete, change and check the operation. For example, in the 0A system, you can only see your own attendance data, and you can’t add, modify or delete it. However, hr little sister can see everyone’s attendance data, and can also modify operations.

Second, the background management system (functional level) permission processing ideas

1. No front end era (front end people can skip this part if they don’t understand)

The era without a front end can be considered the era of the full stack. At that point, the programmer does all the functions on the front and back ends. Although it is a rich client (front-end), but, compared to the current front-end popular era, that is nothing.

So, there are back-end programs to handle permissions. The back-end program handles permissions in conjunction with the database.

Ideas:

1) Need to build tables in the database, generally including:

Function list: Stores all functions of the management system

Role table: stores the role of the whole project, which is actually the role in the company, such as: general manager, marketing manager, marketing specialist, project manager, programmer and so on.

Mapping of roles and functions: This shows which roles have which functions.

User table: all users that can log in to the management system. The user table stores roles. this

Thus, there is a relationship between the user and the function

2) (back-end) program, according to the login user name, along the user name –> role –> function steps, get the corresponding function of the user. Then, display these functions in the area of the navigation bar, which is the idea that users can only see their own functions when they log in.

2. The front end is in vogue now:

Now, the front and back ends separate. So permissions can be handled either by the back end or the front end.

1) Ideas of back-end processing permissions:

Login > enter the username and password — — > the front-end send a user name and password – > back end receives the user name and password – > find database (verify the user name and password) – validation by — > find database (username role — — — — — — > > function) – > access to the user’s function — — > sent to the front — – > the front-end based on access to Function, the loop shows the function.

2) Thinking of front-end processing authority (not recommended) :

First, you need to keep permissions in the front end, which will write dead. So, not recommended. Here’s the idea:

Login function –> Input user name and password –> Front end sends user name and password –> back end receives user name and password –> Find database (verify user name and password)– > Return to front end (at the same time, return to role)– > Front end displays corresponding functions according to the function permissions of roles.

Iii. Use VUE to complete the background management system (functional level) permissions:

This section uses the “Back-end processing permissions” as an example to describe how to display the front-end only function permissions.

Use the VUe-Router’s addRoutes to dynamically change the routing configuration.

1, steps,

1) The default route configuration has only login configuration.

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
let router = new VueRouter({
    mode: "hash".// Routing mode
    routes: [{
            path: "/".redirect: "/Login"
        },
        {
            path: "/Login".component: Login
        }
    ]
});

export default router;
Copy the code

2) After successful login, the back end returns the functional permissions, preferably directly route configuration. If not, the front end will process the functional permissions into json array format of route configuration. The route configuration is dynamically added to the routing object using the vue-Router object’s addRoutes method. At the same time, save the route configuration to sessionStorage (in case the route configuration is lost after the front end refreshes).

axios({
    url: `/roles`.method: "get".params: {
        username: this.username,
        userpass: this.userpass
    }
}).then(res= > {
    let roles = res.data[0].data;
    //this.allRoutes is all the route configuration, which can be placed in vueX. The following code is to generate the route configuration for the user according to the permission 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));
    // Add the obtained permission to vue-router dynamically
    this.$router.addRoutes(currRoutes);
    this.$router.push("/Home");
});
Copy the code

3) The front-end needs to read the route configuration stored in cookie or sessionStorage in the Created in “app. vue”, and also needs to dynamically add the route configuration to the route object by using the addRoutes method of vue-Router object. In this way, you can obtain the route permission of the current user when refreshing the page.

created() {
    this.roles = JSON.parse(sessionStorage.getItem("roles"));
    if (this.roles) {
        //this.allRoutes is all the route configuration, which can be placed in vueX. The following code is to generate the route configuration for the user according to the permission returned by the back end
        let currRoutes = this.allRoutes.filter(item= > {
            return this.roles.some(obj= > obj.path == item.path);
        });
        this.$router.addRoutes(currRoutes); }}Copy the code

2. Pay special attention to:

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

The above steps are tested and passed.

Here is the full code web disk link:

Link: pan.baidu.com/s/1ShL9jADE… Extraction code: TFXR