Writing in the front

Just finished a PC side background personnel authority requirements, encountered a lot of problems during the period, was also tortured very uncomfortable. But once you’ve done the requirements. In the heart of knowledge and some of the original half-baked things have a lot of “confidence”. The study of knowledge must be experienced in practice after all. Again, rearrange records.

Demand background

The background of this demand is that a PC management background project needs to manage personnel permissions, and the same account is associated with different channels. That is to say, the same account has different permissions under different channels. At the same time, users can switch channels through the switch channel button provided on the page to refresh permissions.

This means that the permission data is associated with the channel, and the permission data needs to be refreshed every time the data is switched.

Project analysis

Permission control first needs to make clear that the front end can only do auxiliary work, focus on the back end. Because no matter how the front end is handled, there will always be unconventional means to break through, so the back end permission control is indispensable. Front-end permission control is meaningful only when the back-end has permission control.

Front-end permission control is divided into two parts: open (menu bar page entry control) and dark (routing list control). The emphasis is on the latter, because if the routing list is not controlled, users can still enter the URL directly to the page without permission, defeating the purpose of permission control. Consider the new problem here, which is the classification of menu pages.

For example, there is a menu called “Staff Center”, and there are two pages below: “Staff management” and “Department Management”. However, you can switch to the Create Employee and Permission Configuration pages on the Create Employee page. The entry to these two pages does not exist in the menu bar, but in other related pages. This requires that the “New Employee” and “Permission Configuration” pages also be included in the permission control. And from a business perspective, ensure that new pages are placed under the corresponding module.

The actual development

  1. Complete menu bar menu.json

    Because the corresponding menu bar needs to be filtered out according to different permission data, it means that a complete menu bar file is needed as the basis of filtering. This file can exist on the front end or back end. But storage on the front end is more convenient because you don’t need to call the back end interface. The key here is that each permission control page has a webCode field that uniquely identifies the permission control code for that page. This code is generated at the back end and the only one that remains constant. So if you need to add a new page, you need the back end to provide webCode for the previous addition to take effect.

    For a generic page, its webCode field value is an empty string that can be used to determine if the page is generic.

[{" index ":" 1 ", "menuId" : 140001, "parentId" : 0, "label" : "page center", "icon" : "icon - a page", "url" : "/ page - center", "orderNum", null, "type" : "menu", "webCode" : "MENU_SHOW_PAGE_CENTER", "children" : []}, {" index ": "2", "menuId": 140002, "parentId": 0, "label": "channel center ", "icon": "icon-platform2"," URL ": "/platform/list", "orderNum": Null, "type" : "menu", "webCode" : "MENU_SHOW_CHANNEL_CENTER", "children" : []}, {" index ":" 3 ", "menuId" : 140003, "parentId": 0, "label": "general management ", "icon": "icon-cube"," URL ": "/platform/list", "orderNum": null, "type": "Menu", "webCode" : ""," children ": [{" index" : "1", "menuId" : 140004, "parentId", 140003, "label" : "by management", "icon" : Null, "url" : "/ manage/pagelist/banner", "orderNum", null, "type" : "page", "webCode" : ""," children ": []}, {" index" : "2", "menuId": 140005, "parentId": 140003, "Label ":" Hot zone management ", "icon": null, "URL ": "/ manage/pagelist/hotspot", "orderNum", null, "type" : "page", "webCode" : ""," children ": []}, {" index" : "3", "menuId" : 140006, "parentId": 140003, "label": "pit management ", "icon": NULL," URL ": "/ Manage /pagelist/grid", "orderNum": null, "type": "Page", "webCode" : ""," children ": []}, {" index" : "4", "menuId" : 140007, "parentId", 140003, "label" : "list multiple management", "icon" : Null, "url" : "/ manage/pagelist/the chunk", and "orderNum", null, "type" : "page", "webCode" : ""," children ": []}}, {" index" : "4", "menuId" : 140008, "parentId" : 0, "label" : "employee center", "icon" : "icon - personal", "url" : "/ employee - center/"," orderNum ": Null, "type": "menu ", "webCode": "MENU_SHOW_STAFF_CENTER", "children": [{"index": "1", "menuId": 140010, "parentId": 140008, "label": "employee management", "icon": NULL," URL ": "/employee-center/ employee-Management ", "orderNum": null, "type": "Page", "webCode" : "MENU_SHOW_STAFF_MANAGE", "children" : []}, {" index ":" 2 ", "menuId" : 140009, "parentId" : 140008, "label": "department management", "icon": NULL," URL ": "/employee-center/ department-Management ", "orderNum": null, "type": "Page", "webCode" : "MENU_SHOW_DEPT_MANAGE", "children" : []}}]]Copy the code
  1. Dynamic routing table

Corresponding to the menu bar, a dynamic routing table is required. The route of the common page always exists in routes as a static route. For permission control pages, however, you need to stuff the url of the page with permission into the dynamic routing table, and then use router.addroutes () to stuff the dynamic route into the routing table. This logic must be repeated every time a channel is switched.

// Factory function: generate route instance
const createRouter = () = > {
  return new VueRouter({
    mode: 'history'.base: process.env.BASE_URL,
    routes: commonRoutes,
  })
}

const router = createRouter()

export const addDynamicRoutes = routes= > {
  const newRouter = createRouter()

  newRouter.addRoutes([
    {
      path: '/'.name: 'Base'.component: Base,
      children: [...routes],
    },
  ])
	// Key, replace the old routing table with the new one
  router.matcher = newRouter.matcher
}
Copy the code