Disclaimer: This article is a blogger original article, follow the CC 4.0 by-sa copyright agreement, reproduced, please attach the original source link and this statement.
This link: https: //blog.csdn.net/qq_31906983/article/details/89054798
work, we often encounter this demand, backstage define user permissions data acquisition front-end, and rendered on the sidebar navigation users different permissions see sidebar is different. I.e., the front end is rendered as to the change of the data is changed, the front and rear ends truly separated.
First, get the dynamic routing tables need to add
our ideas are:
Login (login, anyone can see it) ---------> successful login, access privileges --------> different rights, different data show sidebar
Define a common routing table, only some public routes inside, such as login
After obtaining permission, according to the authority we give a dynamic routing table needs to be added, the dynamic routing table to add this router can be.
By access to online information, forums, I summed up the two ways, namely leading front-end and back-end leading.
(1) dominated the front
What is a dominant front-end? That is, in terms of the whole authority, the main body is defined in the front end. The definition of a complete front-end advance permission routing table, the role of the background only to return the current user's permissions list, to get permission to table than full permissions on the table, then get a new routing table take permission rendering.
It should be noted that, why not return directly to the list of permissions take it back rendering, but rather by comparing before arriving permission table?
Because just returned string back!
When we use vue-router route definition, it is the need to import component corresponding to the route, as shown, the component is to be introduced, and the background data are returned to us will not take the corresponding component assembly.
the Login from Import './views/Login.vue'
the let publicRoutes = [
{
path: '/ Login',
name: 'Login',
Component: the Login
}
]
Therefore, we can define a front end ahead of all, by the complete routing table, the backstage pass when the reference data used to arrive at a route permission table.
for example:
In the front end of the definition of full rights table:
import Order from './components/orderCompontents/order.vue'
import OrderList from './components/orderCompontents/orderList.vue'
import ProductManage from './components/orderCompontents/productManage.vue'
import ProductionList from './components/orderCompontents/productionList.vue'
import ReviewManage from './components/orderCompontents/reviewManage.vue'
import ReturnGoods from './components/orderCompontents/returnGoods.vue'
const allroutes = [
{
path: '/order',
title: 'order-manage',
component: Order,
meta: {
name: '订单管理'
},
children: [
{
path: '/order-list',
title: 'order-list',
component: OrderList,
Meta: {
name: 'Order List'
}
},
{
path: '/ Product',
title: 'Product-Manage',
Component: ProductManage,
Meta: {
name: 'Production Management'
},
Children: [
{
path: ' / Product-list ',
title:' Product-list ',
Component: ProductionList,
Meta: {
name:' production list '
}
},
{
path:' / Review-Manage ',
title:' Review-Manage ',
Component: ReviewManage,
Meta: {
name: 'management audit'
}
}
]
},
{
path: '/ return-Goods',
title:'return-goods',
component: ReturnGoods,
Meta: {
name: 'Return Management'
}
}
]
}
]
Background of the data transmitted by:
{
"Code": 0,
"the Message": "Get Permissions success",
"the Data": [
{
"name": "Order Management",
"Children": [
{
"name": "Order List"
},
{
" name ":" production management ",
" Children ": [
{
" name ":" production list "
}
]
},
{
" name ":" Returns management "
}
]
}
]
}
we compared the properties of the two name data, it can easily filter out a route permission table. Then through router.addRoutes () can be dynamically added to the route.
(2) the dominant background
One way in front of simple, well-defined front-end, back-end can be passed over for comparison, but the disadvantages are also obvious. If the background transfer of authority name slightly to make some changes, then the front will not match the corresponding routing. That is a privilege to change the name, together with the need to change the front background. . A bit less in line with the front and rear ends of the complete separation of thought. What we want is, just change the background, then the front end will automatically change based on the data received! Ha ha ha, how to solve this problem? That is the background with the dominant ideology.
Ideas are as follows:
Routing table for comparison is not the front end, the background of the user's authority for comparison, the routing table is returned to the front end than a good routing table, and needs to have returned the following fields:
{
"data": {
"router": [
{
"path": "",
"redirect": "/home",
},
{
"path": "/home",
"component": "Home",
"name": "Home",
"meta": {
"title": "首页",
"icon": "example"
},
"children": [
{
"path": "/xitong",
"name": "xitong",
"component": "xitong/xitong",
"meta": {
"title": "系统",
"icon": "table"
}
}
]
},
{
"path": "*",
"redirect": "/404",
"hidden": true
}
]
}
}
Note that one of the component field, he is a string, the string we need to put this into our front-end components defined!
function filterRouter (routers) {// iterate back route string transmitted, is converted to component object
const = accessedRouters routers.filter (route => {
IF (route.component) {
IF (route.component === 'Home' ) {// Home special handling assembly
route.component = Home
} the else {
route.component = _import (route.component)
}
}
IF (route.children && route.children.length) {
route.children = filterRouter (route.children )
}
return to true
})
return accessedRouters
}
major role of this function is to pass over the background component of the string into real components
Wherein defining _import () function is as follows:
_import function (File) {
return () => Import ( '@ / Components / views /' + + File '.vue')
}
asynchronous loading assembly, the component to request
Which path we need to modify the path according to their own files.
This method is the most important thing is, component backstage pass the actual storage of the path! According to the front end of this path to find the components and assemblies loaded asynchronously.
After the final execution, filterRouter return route is a list of permissions, which the component has also been cited.
The advantage of this approach is that all rights are routing data from the front end of the background, as long as the path does not change, can change the data back, the front end will change automatically.
Second, the rendering data to the sidebar
by (a) we can get a way to render routing table, I keep to vuex in, then out, rendering sideBar page.
----------------
Disclaimer: This article is CSDN bloggers "on the article when Yang" in the original article, follow the CC 4.0 by-sa copyright agreement, reproduced, please attach the original source link and this statement.
Original link: https: //blog.csdn.net/qq_31906983/article/details/89054798