Vue + Element UI 實現權限管理系統前端篇（十三）：頁面權限控制

時間 2019-12-05

標籤 vue element 實現權限管理系統前端十三頁面控制简体版

原文原文鏈接

權限控制方案

既然是後臺權限管理系統，固然少不了權限控制啦，至於權限控制，前端方面固然就是對頁面資源的訪問和操做控制啦。前端

前端資源權限主要又分爲兩個部分，即導航菜單的查看權限和頁面增刪改操做按鈕的操做權限。vue

咱們的設計把頁面導航菜單和頁面操做按鈕統一存儲在菜單數據庫表中，菜單表中包含如下權限關注點。ios

菜單類型

菜單類型代碼頁面資源的類型。類型包括，0：目錄 1：菜單 2：按鈕'。git

權限標識

權限標識便是表明此頁面資源，用來進行權限控制的惟一標識，主要是進行增刪改查的權限控制。數據庫

權限標識包括，sys:user:add：新增 sys:user:edit：編輯 sys:user:delete：刪除 sys:user:view：查看。axios

注：目前查看均可以經過菜單可見性進行控制，因此查看權限標識目前沒有用上，若是須要顯示無權限頁面可使用。後端

菜單表結構

具體的菜單表結構以下。函數

-- ------------------------------------------------
--  菜單
-- ------------------------------------------------
--  Table structure for `sys_menu`
-- ------------------------------------------------
CREATE TABLE `sys_menu` (
  `id` bigint NOT NULL AUTO_INCREMENT COMMENT '編號',
  `name` varchar(50) COMMENT '菜單名稱',
  `parent_id` bigint COMMENT '父菜單ID，一級菜單爲0',
  `url` varchar(200) COMMENT '菜單URL',
  `perms` varchar(500) COMMENT '受權(多個用逗號分隔，如：sys:user:add,sys:user:edit)',
  `type` int COMMENT '類型   0：目錄   1：菜單   2：按鈕',
  `icon` varchar(50) COMMENT '菜單圖標',
  `order_num` int COMMENT '排序',
  `create_by` varchar(50) COMMENT '建立人',
  `create_time` datetime COMMENT '建立時間',
  `last_update_by` varchar(50) COMMENT '更新人',
  `last_update_time` datetime COMMENT '更新時間',
  `del_flag` tinyint DEFAULT 0 COMMENT '是否刪除  -1：已刪除  0：正常',
  PRIMARY KEY (`id`)
) ENGINE=InnoDB DEFAULT CHARSET=utf8 COMMENT='菜單管理';

導航菜單實現思路

1.用戶登陸系統

用戶登陸系統以後，跳轉到首頁。測試

2.根據用戶加載導航菜單

在路由導航守衛路由時加載用戶導航菜單並存儲到store。ui

加載過程以下，返回結果排除按鈕類型。

user -> user_role -> role -> role_menu -> menu。

3.導航欄讀取菜單樹

導航欄到sotre讀取導航樹並進行展現。

頁面按鈕實現思路

1.用戶登陸系統

用戶登陸系統以後，跳轉到首頁。

2.根據用戶加載權限標識集合

在路由導航守衛路由時加載用戶權限標識集合。

加載過程以下，返回結果是用戶權限標識的集合。

user -> user_role -> role -> role_menu -> menu。

3.頁面按鈕控制

頁面操做按鈕提供權限標識，查詢是否在用戶權限標識集合中。

在：有權限，可見或可用，不在：無權限，不可見或禁用。

目前本系統採用的是狀態禁用。

權限控制實現

導航菜單權限

加載導航菜單

以下圖所示，在導航守衛路由時加載導航菜單並保存狀態。

router/index.js

頁面組件引用

導航欄頁面從共享狀態中讀取導航菜單樹並展現。

views/NavBar/NavBar.vue

頁面按鈕權限

添加權限獲取接口

http/modules/user.js

// 查找用戶的菜單權限標識集合
export const findPermissions = (params) => {
    return axios({
        url: '/user/findPermissions',
        method: 'get',
        params
    })
}

添加權限獲取接口

store/modules/user.js

export default {
    state: {
        perms: [],  // 用戶權限標識集合
    },
    getters: {
   
    },
    mutations: {
        setPerms(state, perms){  // 用戶權限標識集合
            state.perms = perms;
        }
    },
    actions: {
    }
}

加載權限標識

以下圖所示，在導航守衛路由時加載權限標識並保存狀態。

router/index.js

權限按鈕判斷

封裝了權限操做按鈕組件，在組件中根據外部傳入的權限標識進行權限判斷。

views/Core/KtButton.vue

<template>
  <el-button :size="size" :type="type" 
    :loading="loading" :disabled="!hasPerms(perms)" @click="handleClick">
    {{label}}
  </el-button>
</template>

<script>
import { hasPermission } from '@/permission/index.js'
export default {
  name: 'KtButton',
  props: {
    label: {  // 按鈕顯示文本
      type: String,
      default: 'Button'
    },
    size: {  // 按鈕尺寸
      type: String,
      default: 'mini'
    },
    type: {  // 按鈕類型
      type: String,
      default: null
    },
    loading: {  // 按鈕加載標識
      type: Boolean,
      default: false
    },
    disabled: {  // 按鈕是否禁用
      type: Boolean,
      default: false
    },
    perms: {  // 按鈕權限標識，外部使用者傳入
      type: String,
      default: null
    }
  },
  data() {
    return {
    }
  },
  methods: {
    handleClick: function () {
      // 按鈕操做處理函數
      this.$emit('click', {})
    }, 
    hasPerms: function (perms) {
      // 根據權限標識和外部指示狀態進行權限判斷
      return hasPermission(perms) & !this.disabled
    }
  },
  mounted() {
  }
}
</script>

<style scoped>

</style>

權限判斷邏輯

src/permission/index.js

import store from '@/store'
/**
 * 判斷用戶是否擁有操做權限
 * 根據傳入的權限標識，查看是否存在用戶權限標識集合
 * @param perms
 */
export function hasPermission (perms) {
    let hasPermission = false
    let permissions = store.state.user.perms
    for(let i=0, len=permissions.length; i<len; i++) {
        if(permissions[i] === perms) {
            hasPermission = true;
            break
        }
    }
    return hasPermission
}