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. 按鈕的控制
    ...
Tags:

VirMach 便宜 VPS