Shulou(Shulou.com)06/01 Report--

This article mainly introduces the permissions of the background management system and vue processing authority case analysis related knowledge, the content is detailed and easy to understand, the operation is simple and fast, has a certain reference value, I believe you will gain something after reading this background management system permissions and vue processing authority case analysis article, let's take a look.

1. Noun interpretation:

There is no need to explain the meaning of permission.

Feature-level permissions:

It means that different roles (or users) see different functions when they enter the system, or that is to say, different functions that can be operated. The processing idea of some systems is that the functions that cannot be operated will not let you see at all; the processing idea of some systems is that you can see all the functions, but the pages of some functions can not be seen at all and cannot be operated. Of course, I personally think the former is better.

For example, in the HIS system, doctors can write prescriptions. Nurses can't.

Data level permissions:

It means you can access a function. But

1. You may not be able to see all the data

2. You may not be able to add, delete, modify and check the data you see.

For example: in the 0A system, you can only see your own attendance data, and you cannot add, modify or delete it. However, the personnel sister can see everyone's attendance data, and can also make changes and other operations.

Second, the idea of dealing with the authority of the background management system (functional level).

1. The era without the front end (people at the front end can skip this part if they don't understand it)

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

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

Train of thought:

1) tables need to be created in the database, which generally include:

Menu: stores all the functions of the management system

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

The corresponding table of roles and functions: this indicates what kind of roles have what functions.

User table: you can log in to all users of the management system, and the roles they belong to will be stored in the user table. this

In that case, there is a relationship between the user and the function

2) (back-end) program, according to the user name of the login, follow the steps such as user name-- > role-> function to get the corresponding function of the user. Then, just display these functions in the area of the navigation bar, that is, after logging in, users can only see the ideas of the functions they have.

two。 The present that prevails at the front end:

At the moment, the front and rear ends are separated. Therefore, permissions can be handled by the back end or by the front end.

1) the idea of dealing with permissions at the backend:

Login function-- > enter user name and password-- > send user name and password at the front end-- > receive the user name and password at the back end-- > find the database (verify the user name and password)-- > find the database (user name-> role-> function)-- > get the user's function-- > send it to the front end-- > the front end according to the acquired function The loop shows this feature.

2), the idea of front-end processing permissions (not recommended):

First of all, you need to save the permissions on the front end, which will be written to death. Therefore, it is not recommended. Here are the ideas:

Login function-- > enter username and password-- > send username and password at the frontend-- > receive the username and password at the backend-- > find the database (verify the username and password)-- when the verification passes-- > return the frontend (at the same time, return the role)-- > the frontend displays the corresponding functions according to the corresponding permissions of the role.

3. Use vue to complete the (functional level) permissions of the background management system:

Here, we still take "the idea of processing permissions at the back end", and the front end only shows the functional permissions as an example to describe it.

Use vue-router 's addRoutes to dynamically change the routing configuration.

1. Steps

1) there is only login configuration in the default route configuration.

Import Vue from 'vue'

Import VueRouter from "vue-router"

Import Login from "@ / pages/Login"

Vue.use (VueRouter); / / install vue-router to Vue.

/ / create a vue-router object

Let router = new VueRouter ({

Mode: "hash", / / Route pattern

Routes: [{

Path: "/

Redirect: "/ Login"

}

{

Path: "/ Login"

Component: Login

}

]

})

Export default router

2) after a successful login, the backend returns the functional permission, which is best directed to the routing configuration. If not, the frontend processes the functional permission into the json array format of the routing configuration. Use the addRoutes method of the vue-router object to dynamically add the routing configuration to the routing object. At the same time, save the routing configuration to sessionStorage (to prevent the loss of the routing configuration after the 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 is all routing configurations, which can be placed in vueX. The following code is to generate the corresponding routing configuration for the user according to the permissions returned by the backend.

Let currRoutes = this.allRoutes.filter (item = > {

Return roles.some (obj = > obj.path = = item.path)

})

/ / Save the acquired permissions to sessionStorage

SessionStorage.setItem ("roles", JSON.stringify (roles))

/ / add the acquired permissions to the vue-Router object dynamically

This.$router.addRoutes (currRoutes)

This.$router.push ("/ Home")

})

3) if the front end is in the created in "App.vue", you need to read the route configuration saved in cookie or sessionStorage. You also need to dynamically add the route configuration to the route object by using the addRoutes method of the vue-router object. In this way, when the page is refreshed, you can get the routing rights of the current user here.

Created () {

This.roles = JSON.parse (sessionStorage.getItem ("roles"))

If (this.roles) {

/ / this.allRoutes is all routing configurations, which can be placed in vueX. The following code is to generate the corresponding routing configuration for the user according to the permissions returned by the backend.

Let currRoutes = this.allRoutes.filter (item = > {

Return this.roles.some (obj = > obj.path = = item.path)

})

This.$router.addRoutes (currRoutes)

}

}

2. Pay special attention to:

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

The above steps have been tested and passed.

On the "background management system permissions and vue processing permissions example analysis" of this article is introduced here, thank you for reading! I believe you all have a certain understanding of the "background management system permissions and vue processing authority case analysis" knowledge. If you want to learn more knowledge, you are welcome to follow the industry information channel.

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.