VUE怎么做權限控制

談一談VUE 后台管理系統權限控制

　　前端權限從本質上來講， 就是控制視圖層的展示，比如說是某個頁面或者某個按鈕，后端權限可以控制某個用戶是否能夠查詢數據， 是否能夠修改數據等操作，后端權限大部分是基於RBAC，比如說 一個用戶可能會有多個角色，而一個角色可以會有不同權限

開始正題部分了

1. 前端做權限有什么好處？

• 降低非法操作的可能性
• 盡可能排除不必要的請求，降低服務器壓力 沒必要的請求，不具備權限的請求，應該壓根就不要發送， 請求少了，服務器壓力自然就很減輕
• 提高用戶體驗  就給用戶展示已有權限的功能，避免在界面上給用戶帶來困惱

2. 前端權限的控制思路

• 菜單的控制

1. 用戶沒有權限 菜單就不要展示沒有的側邊欄
   

• 界面的控制

1. 用戶沒有登錄， 而是在地址欄手動的輸入地址， 界面肯定是不能展示的 而我們要強制是跳轉到登錄界面
   
2. 用戶登錄了， 但是手動輸入跳轉到沒有權限的界面， 我們要強制跳轉到404界面

• 按鈕的控制

1. 用戶進入頁面，但是他只有查看權限 ， 刪除和修改按鈕就不應該展示出來　

• 請求和響應的控制

1. 用戶篡改了非常規操作， 比如 禁用的按鈕改成啟用狀態， 此時發送的請求 就應該被攔截

3. Vue的權限控制實現

// 后面的操作都是基於這個結構， 結構可以跟后台溝通
// 后台返回的登陸數據
{
  data: [用戶名，token 什么的],
  rights: [
    {
      id:1,
      authName: '用戶管理',
      icon: 'icon-user',
      children: [
        {
          id: 1_1,
          authName: '用戶列表',
          path: 'users',
          rights: ['view', 'add', 'edit', 'delete']
        }
      ]
    },
     {
      id:2,
      authName: '角色管理',
      icon: 'icon-tiji',
      children: [
        {
          id: 2_1,
          authName: '角色列表',
          path: 'roles',
          rights: ['view', 'add']
        }
      ]
    }
  ]
}

1. 菜單的控制 
   （1）查看登陸之后的數據
   　　  token 用於前端用戶的狀態保持
   　　  rights 該用戶具備的權限數據，一級菜單就對應着一級權限，二級菜單就對應二級權限
   （2）根據rights數據，動態渲染左側菜單欄，為了方便使用，一般放在vuex中 但是vuex中的數據在頁面刷新就會消失，所以配合本地存儲使用，localstoage或者sessionstoage 看產品需求　
   （3）退出登錄的時候 要把本地存儲的數據清空 和vuex數據也清空，vuex中數據清空最簡單的方法就是 window.location.reload()
   
2. 界面的控制
   （1）假如用戶不進行登陸 ，輸入相應頁面的網址 也可以進入頁面，所有我們要判斷用戶的是否登錄
   　　
   

    router.beforeEach((to, form, next )=> {
      if (to.path == '/Login') {
        next()
      } else {
        const token = sessionstoage.getItem('token')
        if (!token) {
          next('/Login')
        } else {
          next()
        }
      }
    }) 

    

    （2）進行token驗證后 ，會發現用戶登錄后還是可以通過url訪問不存在權限的頁面
   　　這里就需要使用動態路由
   　　首先在router.js export 一個方法
   

   // router.js
   import store from '@/sotre'
   
   const userRule = { path: '/users', component: Users}
   const roleRule = { path: '/roles', component: Roles}
   
   // vuex中存放的rightsList中每個path添加到路由中 怎么添加呢？？？ 請看
   users，roles都是跟后台定義好的，所以對號入座
   const ruleMapping = {
     'users': userRule,
     'roles': roleRule
   }
   
   export function initRoutes () {
     const currentRoutes = router.option.routes // 可以拿到router的路由配置信息
     const rightsList = store..state.rightsList // 取出vuex存儲的用戶路由信息
     rightsList.forEach(item => {
       item.children.forEach(items => {
         currentRoutes[2].push(ruleMapping[items.path]) // 這步很關鍵 把對應的值push進去
       })
     })
     router.addRoutes(currentRoutes)
   }

    

       在login頁面引入 登陸成功的時候調用 要在vuex賦值之后再調用
   　這時又會發現一個問題， 頁面一刷新 訪問那個頁面都會是404
   　因為動態添加的路由 一刷新頁面就會消失，
   　哼哼哼，仔細聽
   　我們可以在App頁面中created生命周期函數中調用router.js 中initRoutes方法，
   　你就會發現 頁面刷新也沒事了 而且登陸的用戶通過url跳轉沒有權限的頁面也是不可以了
   

3. 按鈕的控制
   ...