👨 💻 preface

  • Unconsciously, it has recently come to September, which is the season for most graduates and interviewees to find jobs. I can’t help thinking of those things when I just started working.
  • First of all, I regret that I didn’t take part in the school recruitment. I didn’t have any projects when I started to look for a job. I had a background management system and a small program project and a small programH5The mobile project just ran off to the interview.
  • In the interview, I was also asked about background permission management. At that time, I didn’t know what is permission management and dynamic routing. In the project, all the routes were written dead and I didn’t do any permission management.
  • After some time of precipitation, I have some understanding of this aspect. Now I want to tell the knowledge about this part to the students who need it. I will try my best to make it easy to understand.
  • This paper participated inNuggets surrounding gifts 🎁 campaignYo, the specific rules please see the end of the article.

⁉ ️ What is permission management

  • As the name implies, the so-called authority management is the limitation of power, and people with different powers can do different things.
  • If you crossed the line, sorry, the operation is invalid.
  • And in our background management system authority management is the same meaning, super administrator can do more than the administrator can do things, and thisthingsIn fact, in our front end, it seems obviousWhat page is displayed, what action button is displayed.
  • So the purpose of our front end is to dynamically control the rendering of the page and the rendering of the button based on who has different permissions. So how do we judge? Permission table, some of the permission table is a permission array, some of the permission is specified in advance for different roles by returning a role to distinguish, the specific with the back end to cooperate.
  • When is the most reasonable time for us to obtain the permission table? It is undoubtedly the time for login. So our process is like this:
    • Log in to the system to obtain the token
    • Obtain user information based on token (permission table, etc.)
    • Add front-end routing dynamically according to the permission table and other information, so that different people see different pages

❣️ How is routing dynamic

  • We know the permissions to limit the different page display and jump, then our page jump through what control? Yes, routing.
  • Every time we go to another page we are actually entering a different route, and we can use the route guard to restrict the operation.
  • We can tell herecookieWhether or not theretokenIf not, the system will enter the login page for logintokenAnd permissions.
  • We can assemble routing tables based on permissions(More on routing table assembly below)And then through therouter.addRoutesAdd routes and store this information invuexInside, ourtabbarThe sidebar and so on can use this information to control styles or show and hide.
  • To put it bluntly, our procedure for dynamic routing looks something like this:
    • We determine login status by intercepting the route before it jumps
    • If you log in, you can pass. If you don’t log in, you can log in and store permissions and information
    • These permissions are used to assemble routes and improve our front-end routing

💗 Where to store routes

  • Now we all know that you need to do this with permissions returned from the back endThe routing tableAssembly, and then throughrouter.addRoutesAdd a route, then ourThe routing tableIn fact, there are different storage methods according to different projects.

On the front end

  • On the front control of the classic case is vue-element-admin, I believe that most people’s permission routing is to see the door, here I will not write more source code, if there is a need to taste their own.
  • Back to the topic, the routing table is in the front which is where we’re in a file likerouter.jsDefine all possible routes:
/** router.js **/
export let Routes = [{
    path: '/'.redirect: '/home/index'
  },
  {
    path: '/home'.component: layout,
    redirect: '/home/index'.meta: { roles: 'home' },
    children: [...]. }]Copy the code
  • Each defined route must be addedmetaRoute meta information to represent the permissions required for this route through each routemetaMatches with the permission table.
  • And then we get a final routing table, and this routing table is what we wantrouter.addRoutesRouting.
  • Giving front-end control is basically doing one thing through the user’s permissions and the previous inrouter.jsInside each page of the required permission to do a match, and finally return a user can access the route which.
  • Of course it’s in the frontThe advantages and disadvantagesThere are:
    • Logic clear code amount is not much, novice to see will be more clear, easier to use.
    • Although the routing table is defined in the front end, it is written dead. Each new module or module modification can not be dynamically modified, but can only be changed by the front end.

On the backend

  • There are also a lot of examples in the back end, now many open source management system background has a front end with the back end of the dynamic routing authority system, for example, take Ruoyi.
  • First, there will be a basic routing table at the front, which will contain some initial pages, including fixedThe layout page,404 pages:
// The front end did not find the page route
const notFoundRouter = {
  path: The '*'.redirect: '/ 404'.hidden: true
}
// Root menu
const rootRouter = {
  key: ' '.name: 'index'.path: ' '.component: 'BasicLayout'.redirect: '/index'.meta: {
    title: ' '
  },
  children: []}Copy the code
  • The initial page varies from project to project, and these pages are basically the same. The key is how we dynamically add the route to our page in the routing table.
  • We’re throughtokenMethod, which requests a routing interface from the back end, usually returns oneRouting jsonSince our routing table is an object, we need to do the processing on the front end to concatenate the final routing table.
  • And then we get a final routing table, and this routing table is what we wantrouter.addRoutesRouting.
  • Hand it over to the back end control which basically returns allRouting jsonWe add splicing to the project route, and these are dynamic.
  • Of course, the advantages and disadvantages of giving back end control are also mentioned:
    • Dynamic enough this system usually has a menu management, we can dynamically change the route by configuring the menu online, which is much more convenient than writing dead routes in the front end.
    • It’s secure enough because the routing table is maintained in the database, which is more or less secure than it is on the front end.
    • Understanding difficulties It can be difficult for someone new to dynamic routing to read the source code of a good open source project.

🙋♂️ now I know

  • Okay, so now we have a dynamic permission routing module which is throughPermissions on the table + The routing tableTo implement.
  • So we only need to understand two elements, the current role permissions (permissions table), and the complete routing table. Normally, role permissions are returned by the back end, which is just a question of where to put the complete routing table. I also mentioned two ways to assemble the routing table above, and you can choose your own way according to the requirements of the project.
  • After we go through all the logic, if anyone asks about yourHow does permission routing work, you can answer with confidence:
    • There are different ways to handle this in different projects, but the most important elements are the role permissions (permissions table) and the full routing table.
    • Permissions are no doubt returned through the back end of the interface, just where the routing table is placed.
    • The logic of my project is that both the routing table and the permission table are edited in the admin background. Once logged in, the back end returns the privilege list and routing table for that role, and builds routes and menus from that data.
  • This confident finish is enough, remember not to say too much, because he will ask for details, the next only need to recall my above a few pictures can be ~

👉 reference

vue-element-admin

Hand to hand, take you to use vUE masturbation background series two (login permission)

Dynamic routing front-end control or back-end control? (With code)

👋 is at the end

  • First of all, I’m glad you read it. This article uses 5 images to help you beat dynamic permission routing.
  • This article participated in the nuggets around the gift 🎁 ~ just leave your opinion on dynamic permission routing or what you want to say to the new front end in the comments section, the two students with the most likes in the comments section will receive nuggets new badges by 12 noon on the 12th!! If I get a new badge or a new IPT shirt from Top 1-5 in this article, I will give it to my friends in the comment section and give it to everyone in the group in lucky draw!! To seize the opportunity, we can pay attention to the public number “front run quickly” to join the learning exchange group.
  • If you feel that this article has helped to your words might as well 🍉 attention + likes + favorites + comments + forward 🍉 support yo ~~😛 your support is the biggest power OF my update.

🌅 past wonderful

In order to drink two more cups of milk tea ☕, I wrote an automated script for my project

A “water” button 💧

Product Manager: Can you get the word cloud moving?

Fix echarts map rotation highlighting ⚡