使用vue-router怎么實(shí)現(xiàn)權(quán)限控制

本篇文章為大家展示了使用vue-router怎么實(shí)現(xiàn)權(quán)限控制，內(nèi)容簡明扼要并且容易理解，絕對能使你眼前一亮，通過這篇文章的詳細(xì)介紹希望你能有所收獲。

創(chuàng)新互聯(lián)基于成都重慶香港及美國等地區(qū)分布式IDC機(jī)房數(shù)據(jù)中心構(gòu)建的電信大帶寬，聯(lián)通大帶寬，移動(dòng)大帶寬，多線BGP大帶寬租用,是為眾多客戶提供專業(yè)服務(wù)器托管報(bào)價(jià)，主機(jī)托管價(jià)格性價(jià)比高，為金融證券行業(yè)成都天府聯(lián)通服務(wù)器托管，ai人工智能服務(wù)器托管提供bgp線路100M獨(dú)享，G口帶寬及機(jī)柜租用的專業(yè)成都idc公司。

菜單權(quán)限，根據(jù)不同權(quán)限顯示不同的菜單
操作權(quán)限，比如有些賬號沒有新增權(quán)限，有些沒有修改或者刪除權(quán)限
數(shù)據(jù)權(quán)限，比如統(tǒng)計(jì)概況，普通管理員不能看到公司營業(yè)概況，但能看到自己所屬區(qū)域的概況
顯示權(quán)限，比如列表，運(yùn)營能看到那一列的簽約金額，但市場不能看到簽約金額這一列

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

菜單權(quán)限：

最開始的時(shí)候也是按照樓上給出的方法，本地先配置一套路由，然后登陸成功后會從服務(wù)器返回一個(gè)菜單列表，然后在beforeEach里面把返回的菜單列表和本地配置的路由進(jìn)行對比，如果存在則有權(quán)限訪問。做了幾天發(fā)現(xiàn)很難用，本地得配置一整套路由，還得做幾個(gè)頁面來把這些路由信息寫入到服務(wù)器，這樣來進(jìn)行權(quán)限分配，當(dāng)你的權(quán)限菜單比較多的時(shí)候，像我們這個(gè)后臺，光公司內(nèi)部權(quán)限就有好幾套，還有代理商、商家權(quán)限等等，不同的菜單可能會超過幾百個(gè)，這樣配置太累了，還容易出錯(cuò)。

最后的解決思路是完全不在本地做任何路由配置，登錄頁面單獨(dú)弄，不放到vue組件里面，登錄成功后從后臺抓取菜單列表，因?yàn)楝F(xiàn)在是已經(jīng)登錄成功了，所以抓取的就是擁有全新的菜單。抓取成功后在配置到路由里面，然后實(shí)例化vue , 這樣就避免了本地配置一套路由了，完全是服務(wù)器上面配置路由。

這樣解決的難點(diǎn)只有一個(gè)，那就是路由需要對應(yīng)的組件，所以我們將所有組件存放到一個(gè)對象里面，服務(wù)器的返回的菜單列表里面，會有一個(gè)字段配置組件名，在抓取成功后生成路由配置的時(shí)候就使用 router[menuName]就能直接加載到這個(gè)組件，非常方便。

main.js代碼片段：

// 實(shí)例化Login類并初始化
 new Login(function (err, data) {
  if (err) {
   // 登錄出錯(cuò)
  } else {
   // 登錄成功
   init(data);
  }
 }).init();

const init = function (data) {
 // 先配置路由信息
 // componentConfigs 是本地的組件配置
 let routers = assignRouter(data.menus, componentConfigs);
 // 實(shí)例化路由
 router = new Router({routes: routers});
 // 再實(shí)例化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)限，思路是這樣的：寫一個(gè)鑒權(quán)的vue插件，然后所有的操作獨(dú)立放到methods里面; 然后所有的操作 @click里面調(diào)用鑒權(quán)函數(shù)， $auth('add', arg1, arg2, ...argN) ; $auth里面判斷this.$route.meta 里是否有權(quán)限進(jìn)行這個(gè)操作，如果有則調(diào)用 this[authName].apply(null, arg);

上述內(nèi)容就是使用vue-router怎么實(shí)現(xiàn)權(quán)限控制，你們學(xué)到知識或技能了嗎？如果還想學(xué)到更多技能或者豐富自己的知識儲備，歡迎關(guān)注創(chuàng)新互聯(lián)行業(yè)資訊頻道。

當(dāng)前名稱：使用vue-router怎么實(shí)現(xiàn)權(quán)限控制
網(wǎng)站路徑：http://muchs.cn/article8/jpghop.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供軟件開發(fā)、關(guān)鍵詞優(yōu)化、服務(wù)器托管、外貿(mào)建站、企業(yè)網(wǎng)站制作、網(wǎng)站改版

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請盡快告知，我們將會在第一時(shí)間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場，如需處理請聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時(shí)需注明來源：創(chuàng)新互聯(lián)

猜你還喜歡下面的內(nèi)容