vue-router implements permission control method

This article mainly introduces to you the sample code of vue-router permission control. The editor thinks it is quite good, so I will share it with you now and give it as a reference. Let’s follow the editor to take a look, I hope it can help everyone.

The company's backend management system has recently been built, and the system is still relatively large. The following points must be achieved:

• Menu permissions, different display according to different permissions Menu

• Operation permissions, for example, some accounts do not have permission to add new ones, and some do not have permissions to modify or delete

• Data permissions, such as statistical overview, Ordinary administrators cannot see the company's business overview, but they can see the overview of their own region

• Display permissions, such as lists, operations can see the contract amount in that column, but the market cannot See that the contract amount column

is still under construction so far, and the menu permissions and operation permissions have been resolved.

Menu permissions:

At the beginning, we also followed the method given above. We first configure a set of routes locally, and then after successful login, a menu list will be returned from the server. Then in beforeEach, the returned menu list is compared with the locally configured route. If it exists, it has permission to access. After working on it for a few days, I found it difficult to use. I had to configure a complete set of routes locally, and I also had to create several pages to write these routing information to the server, so as to allocate permissions. When you have a lot of permission menus, like ours In this backend, there are several sets of internal company permissions, as well as agent, merchant permissions, etc. There may be more than hundreds of different menus. Such configuration is too tiring and error-prone.

The final solution is not to do any routing configuration locally at all. The login page is made separately and not placed in the vue component. After the login is successful, the menu list is grabbed from the background because the login is successful now. , so what you're grabbing is having a whole new menu. After successfully fetching, configure it into the route, and then instantiate vue. This avoids the need to configure a set of routes locally, and configures the route entirely on the server.

There is only one difficulty solved in this way, that is, routing requires corresponding components, so we store all components in an object. In the menu list returned by the server, there will be a field to configure the component name. , when the routing configuration is generated after the fetch is successful, just use router[menuName] to load it directly into this component, which is very convenient.

main.js code snippet:

// 实例化Login类并初始化
 new Login(function (err, data) {
  if (err) {
   // 登录出错
  } else {
   // 登录成功
   init(data);
  }
 }).init();

const init = function (data) {
 // 先配置路由信息
 // componentConfigs 是本地的组件配置
 let routers = assignRouter(data.menus, componentConfigs);
 // 实例化路由
 router = new Router({routes: routers});
 // 再实例化vue
 new Vue({
  el: '#app',
  store,
  router,
  nprogress,
  ...App
 });
};

componentConfigs.js code snippet:

export default {
 Common: {
  Admin: require('../../vue/pages/common/Admin'),
  Index: require('../../vue/pages/common/Index'),
  UpdatePassword: r => require.ensure([], () => r(require('../../vue/pages/users/UpdatePassword')), 'users')
 }
}

The menu json returned by the server:

The meta field contains the operation permissions in the current route

[{
      "path": "\/admin\/index",
      "name": "\u9996\u9875",
      "component": "Common.Index",
      "display": true,
      "icon": "icon-home"
    }, {
      "path": "\/admin\/updatePassword",
      "name": "\u4fee\u6539\u5bc6\u7801",
      "component": "Common.UpdatePassword",
      "display": false
    }, {
      "path": "\/admin\/commodity",
      "name": "\u5546\u54c1\u7ba1\u7406",
      "component": "Content",
      "display": true,
      "icon": "icon-class",
      "children": [{
        "path": "\/admin\/commodity\/publicWarehouse",
        "name": "\u516c\u5171\u5e93\u7ba1\u7406",
        "component": "Commodity.PublicWarehouse",
        "display": true,
        "meta": {"handleAuth": {"add": true, "edit": false, "del": true}}
      }, {
        "path": "\/admin\/commodity\/businessesWarehouse",
        "name": "\u5546\u5bb6\u5e93\u7ba1\u7406",
        "component": "Commodity.BusinessesWarehouse",
        "display": true,
        "meta": {"handleAuth": {"add": true, "edit": false, "del": true}}
      }]
    }]

The permissions of the menu are probably In this way, as for the operation permissions, the idea is as follows: write an authentication vue plug-in, and then put all operations independently into methods; then all operations call the authentication function in @click, $auth('add', arg1, arg2, ...argN); $auth determines whether this.$route.meta has permission to perform this operation. If so, call this[authName].apply(null, arg);

Related recommendations:

#How to implement menu permission control in react?

Practical PHP member permission control implementation principle analysis_PHP tutorial

Based on native PHP cross-member permission control_PHP tutorial

The above is the detailed content of vue-router implements permission control method. For more information, please follow other related articles on the PHP Chinese website!