vue 權(quán)限控制

1、定義路由的時候可以配置 meta 字段,在beforeEach勾函數(shù)進行權(quán)限過濾。
2、登錄后后端返回一個標識（token），所有請求都帶上token。如果對不上則返回403,然后進行跳轉(zhuǎn)到登錄頁！

不過用a跳轉(zhuǎn)的路由沒有找到比較好的方法，只能在后端判斷一個用來記錄是否登錄的一個標識是否存在，來進行權(quán)限控制。

https://github.com/OneWayTech...

推薦一個基于Vue/Vue-Router/axios 實現(xiàn)的前端用戶權(quán)限控制解決方案，解決路由、視圖、請求三個層面的權(quán)限控制：Vue2.0用戶權(quán)限控制解決方案

最近搭建了公司的后臺管理系統(tǒng)， 而且系統(tǒng)還比較龐大， 要實現(xiàn)以下幾點：

1. 菜單權(quán)限， 根據(jù)不同權(quán)限顯示不同的菜單

2. 操作權(quán)限， 比如有些賬號沒有新增權(quán)限， 有些沒有修改或者刪除權(quán)限

3. 數(shù)據(jù)權(quán)限， 比如統(tǒng)計概況， 普通管理員不能看到公司營業(yè)概況，但能看到自己所屬區(qū)域的概況

4. 顯示權(quán)限， 比如列表， 運營能看到那一列的簽約金額，但市場不能看到簽約金額這一列

到目前為止還在構(gòu)建中， 已經(jīng)解決菜單權(quán)限和操作權(quán)限。
菜單權(quán)限：

最開始的時候也是按照樓上給出的方法，本地先配置一套路由，然后登陸成功后會從服務(wù)器返回一個菜單列表，然后在beforeEach里面把返回的菜單列表和本地配置的路由進行對比， 如果存在則有權(quán)限訪問。 做了幾天發(fā)現(xiàn)很難用， 本地得配置一整套路由，還得做幾個頁面來把這些路由信息寫入到服務(wù)器，這樣來進行權(quán)限分配， 當(dāng)你的權(quán)限菜單比較多的時候， 像我們這個后臺，光公司內(nèi)部權(quán)限就有好幾套， 還有代理商、商家權(quán)限等等， 不同的菜單可能會超過幾百個， 這樣配置太累了，還容易出錯。
最后的解決思路是完全不在本地做任何路由配置， 登錄頁面單獨弄，不放到vue組件里面， 登錄成功后從后臺抓取菜單列表， 因為現(xiàn)在是已經(jīng)登錄成功了，所以抓取的就是擁有全新的菜單。 抓取成功后在配置到路由里面，然后實例化vue , 這樣就避免了本地配置一套路由了，完全是服務(wù)器上面配置路由。
這樣解決的難點只有一個，那就是路由需要對應(yīng)的組件，所以我們將所有組件存放到一個對象里面， 服務(wù)器的返回的菜單列表里面，會有一個字段配置組件名， 在抓取成功后生成路由配置的時候就使用 router[menuName]就能直接加載到這個組件，非常方便。

main.js代碼片段：

// 實例化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 代碼片段：

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')
  }
}

服務(wù)器返回的菜單json:
其中meta 字段里面是當(dāng)前路由里的操作權(quán)限

[{
            "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}}
            }]
        }]

菜單的權(quán)限大概就是這樣， 至于操作權(quán)限， 思路是這樣的： 寫一個鑒權(quán)的vue插件， 然后所有的操作獨立放到methods里面; 然后所有的操作 @click里面調(diào)用鑒權(quán)函數(shù)， $auth('add', arg1, arg2, ...argN) ; $auth里面判斷this.$route.meta 里是否有權(quán)限進行這個操作， 如果有則調(diào)用 this[authName].apply(null, arg);

用state來記錄用戶的權(quán)限，watch 這個值，如果沒有權(quán)限，則路由到別處

<navigation v-if="['login', 'register'].indexOf($route.name) > -1"></navigation>