vue-router 权限控制的示例代码

服务器返回的菜单json:

其中meta 字段里面是当前路由里的操作权限

[{
      "path": "/admin/index",
      "name": "u9996u9875",
      "component": "Common.Index",
      "display": true,
      "icon": "icon-home"
    }, {
      "path": "/admin/updatePassword",
      "name": "u4feeu6539u5bc6u7801",
      "component": "Common.UpdatePassword",
      "display": false
    }, {
      "path": "/admin/commodity",
      "name": "u5546u54c1u7ba1u7406",
      "component": "Content",
      "display": true,
      "icon": "icon-class",
      "children": [{
        "path": "/admin/commodity/publicWarehouse",
        "name": "u516cu5171u5e93u7ba1u7406",
        "component": "Commodity.PublicWarehouse",
        "display": true,
        "meta": {"handleAuth": {"add": true, "edit": false, "del": true}}
      }, {
        "path": "/admin/commodity/businessesWarehouse",
        "name": "u5546u5bb6u5e93u7ba1u7406",
        "component": "Commodity.BusinessesWarehouse",
        "display": true,
        "meta": {"handleAuth": {"add": true, "edit": false, "del": true}}
      }]    }]

菜单的权限大概就是这样， 至于操作权限， 思路是这样的： 写一个鉴权的vue插件， 然后所有的操作独立放到methods里面; 然后所有的操作 @click里面调用鉴权函数， $auth(‘add’, arg1, arg2, …argN) ; $auth里面判断this.$route.meta 里是否有权限进行这个操作， 如果有则调用 this[authName].apply(null, arg);