❝
前沿：我所理解的门户Portal就是一个入口, 可快速整合应用入口，用来统一账号管理、统一认证登录，打破信息孤岛等，做统一的权限管理，也可以实现单点登录 SSO。早期的MVC时代，web应用其实就有通过权限去控制页面、菜单、按钮等的显示和隐藏，只不过呈现方式不同，大多以php和jsp等为主，随着前后端分离后，前端也成了权限控制的扛把子，主要是从以下这几个角度去实现，路由层面、视图层面以及接口层面
❞
1.路由层面
❝
一般SPA应用结合vue-router和vuex实现完成的一套路由体系，主要两种方式，一种是通过vue-router addRoutes 方法注入路由实现控制，另外一个是直接通过vue-router beforeEach钩子限制路由跳转
❞
1.1 router.beforeEach()
❝
beforeEach钩子函数就是在路由跳转前执行的，通过注册 router.beforeEach 钩子对路由的每次跳转进行管理，每次跳转都进行检查，如果目标路由不存再于基本路由和当前用户的用户路由中，则取消跳转，转为跳转错误页或登录页面
❞
在路由定义时添加meta的一个属性，来控制判断该页面是否需要登录权限
1.2 动态路由 (DynamicRoutes)
❝
用来实现页面访问权限，动态路由通过router.addRoutes() ，来只挂载当前用户拥有权限的路由，如果用户直接访问未授权的路由，则会进入404页面。但是前提是需要用户登录后获取路由权限，一般动态挂载是在router.beforeEach处理的，下面我们看具体实现
❞
定义好需要动态挂载的路由，区分是分为初始路由和根据role角色来动态挂载的“用户路由”，比如constantRoutes和 asyncRoutes
router.beforeEach 添加 router.addRoutes 事件   文档链接?
为了防止重复配置相同路由，在添加路由之前判断是否已经存在角色权限
获取拥有权限的路由，generateRoutes的实现
通过递归的方式去过滤去用户的路由权限，通过router.addRoutes()动态添加所有符合权限的路由，当然这种方式需要依赖后端。对于不同角色的用户，是由后端将路由列表告诉给前端注册
❝
?‍? 啊乐同学: 如果这个时候我退出登录了，然后没有刷新页面，重新登录另一个不同权限的用户，那岂不是路由会重复？
❞
答：你在路由文件中定义resetRouter的方法,新建一个全新的 Router，然后将新的 Router.matcher 给当前的Router，在登出的模块中调用resetRouter方法
总结：
beforeEach 是需要靠我们手动去帮 vue-router “辨别哪些页面可以访问，哪些不可以 ”
addRoutes 则是通过注入路由配置告诉 vue-router “我就只认这些路由，其它路由地址跟我无关”
2.视图层面
❝
上一节聊的路由方面的权限控制，主要在控制菜单页面权限，那如果是按钮权限，应该怎么做？比如页面中的按钮 (增、删、改、查)的权限控制是否显示
❞
2.1 指令控制
❝
可以结合vue的自定义指令，实现一个权限指令比如 v-auth来控制权限，来判断对应模块是否拥有某个权限时，如果没有则移除当前按钮dom元素，下面我们看下这个实现方式?
❞
通过自定义权限指令v-auth来实现按钮权限控制，通过传入权限角色数组列表,来控制元素是否显示
❝
?‍?  啊乐同学: 为啥不直接用 v-if 或者 v-show 去控制显示隐藏，而是自定义指令？
❞
答：因为 v-show 的话，dom其实没有隐藏，用户可以改变display就看到，v-if呢，则是删除之后会遗留备注
思考?  : 如果要实现按钮显示但是禁用的情况，上面的例子应该如何修改？
? 推荐阅读：
vue-element-admin后台前端解决方案
手摸手，带你用vue撸后台 系列二(登录权限篇)
3.接口层面
❝
我们在项目使用中，请求库以axios较多，我们通常会使用axios的API axios.interceptors.request.use 也就是拦截器来做权限管理
❞
请求头添加 token认证，或者也可以直接使用cookie中的授权信息，前提是要配置 withCredentials为true，也就是axios.defaults.withCredentials = true, 开启withCredentials后，服务器才能拿到你的cookie
拦截器拦截接口返回结果，比如401没有登录权限。
请你喝杯? 记得三连哦～
1.阅读完记得给? 酱点个赞哦，有? 有动力
2.关注公众号前端那些趣事，陪你聊聊前端的趣事
3.文章收录在Github frontendThings 感谢Star✨

随着软件的发展，网站从最初的满足用户业务需求到提升用户。就比如一个按钮只要求权限方面的管控我们可以通过 shiro，注解等方式来实现，但是页面上用户点击后没反应或者点击后弹框没权限，这显然不是一个好的用户体验，因此通过前端来实现权限管控也是很有必要的。

思路

1.获取按钮权限

2.按钮权限保存在前端全局中 vuex

3.页面加载按钮时通过判断权限的存在与否，控制按钮的显示隐藏或者样式选择

PS：事实证明，思路清晰，实现起来就很容易，没几行代码

表结构与数据

就表结构方面设计上不管有哪些字段，我们需要一个字段来存储唯一权限，其他都是浮云，如图



打印看看获取到的数据



可以看到我只返回了权限数组，因为其他字段没有意思，当然直接返回对象也是 ok 的

实现

先来添加下 vuex 全局变量，方便后面获取到按钮权限后进行存储

/src/store/modules/user

新增 button 全局变量，并在新增 mutations 操作 button

   

为啥是在这，因为按钮的权限是属于每个用户的

/src/store/getters

使用时我们一般需要通过这个东西来获取全局变量中的值

这个 state.user.button 以我的理解就是上图中 user 对象下的 button



/src/store/modules/user

回到 user 文件，现在我们可以把取到的 button 权限放到全局变量中就行了



做过权限模块的都知道这个 GetUserInfo 方法，每次缓存失效后，都会调用这个方法去获取必要的用户信息，这里按钮权限我也是在这里直接返回获取。

如果说你的按钮权限时单独写的，你也可以在这个文件里写个获取的方法，然后再 permission 文件里去调用，如图


当然我不太建议单独去获取，因为由于vue自身特性的原因，vuex中的数据在页面刷新之后其中的数据会初始化，也就是数据没了，这个时候就会去调用后台去获取数据，如果每次都去单独获取，在高并发等情况下这种频繁的重复数据的请求会给数据库带来巨大的压力，因此像一些用户权限数据，我比较建议在登陆时统一获取后保存到 redis 这种地方，以后的请求都只需要从 redis 取就可以了，效率上也会得到巨大的提升。

按钮调用



调用就很简单了，直接获取全局中的权限，用 v-if 判断是否包含这个按钮就行了，includes 后面的字符串就是对应这个按钮的权限
PS：如果存储起来的不是这种简单的字符串数组，也可以改为 some 函数去判断

后台管理项目中有系统权限控制，根据你登录的角色账号，后台给你返回不一样的权限控制，用按钮显示，然后再做操作。

我们登录成功之后把权限保存在session storage里面，用ktBtn命名来存储。

然后在main.js里面写全局指令。
Vue.directive("has", {
  inserted: function (el, binding) {
    let prems = JSON.parse(sessionStorage.getItem("ktBtn"))
    if (prems.indexOf(binding.value) == -1) {
      el.remove()
    }
  }
})

现在就好了，然后在有权限控制按钮的页面操作，在按钮上添加v-has。
<el-button type="primary" v-has="'/user/trans;/sys/auth/admin/list'">转让客户</el-button>
<el-button type="primary" v-has="'/user/setUserStatus'">冻结账号</el-button>
<el-button type="primary" v-has="'/user/setUserStatus'">解冻账号</el-button>

现在页面上就会显示权限按钮了，当你有这个权限的时候会显示，登录的角色没有这个权限的时候会隐藏，不会的可以直接copy代码尝试一下。

前端朋友遇到项目中的一个问题，就是需要根据后台接口返回的数据，来判断当前用户的操作权限。比如有删除权限，就显示对应的删除按钮，没有这个权限，就置为不可点击状态，或者就是直接隐藏。

作为一个后台开发工作者来讲，对于前端的一个技术，涉猎并不是很深，只能通过官方文档或者百度先简单了解下。经过一系列的调查 得知，想实现这么一个功能，比较简单的就是使用VUE中的状态管理（有没有其他更好的方法，暂时还不知道），一些基本的东西我还知道点。状态管理？ 只听过，没用过。经过一段时间的调查 测试，终于实现了基于状态管理 按钮级别的权限控制。

先看下不同权限在页面上的显示情况，为了更好的表示，此事例对于没有权限的按钮采用禁用的方式。

没有删除权限的时候，页面按钮显示如下


有删除权限的时候，页面按钮显示如下


 

接下来看具体的实现步骤：

1、首先在src目录下创建 store 文件夹，然后在 store 文件加下创建 index.js 文件，index.js内容如下：

// 导入 vue
import Vue from 'vue'
// 导入 vuex
import Vuex from 'vuex'
// 使用vuex
Vue.use(Vuex);

//创建vue实例
const store = new Vuex.Store({
    state:{
        // 设置属性，用于保存后台接口返回的权限数据
	   permission:[]
    }
})

//导出store
export default store

2、然后在 main.js 中导入 store/index.js 文以供全局使用

import Vue from 'vue'

import store from './store/index.js'

Vue.config.productionTip = false;

new Vue({
  store,
  render: h => h(App)
}).$mount('#app')

3、此时我们已经把需要的东西准备好了，那么如何将接口中获取的数据存到store中呢？接下来就要开始修改 store/index.js 文件：

import Vue from 'vue'
import Vuex from 'vuex'
// 使用vuex
Vue.use(Vuex);

//创建vue实例
const store = new Vuex.Store({
	state:{
		permission:[]
	},
	mutations:{
		SET_PERMISSION(state,permission){//permission 为传入的权限标识集合
		    // 传入的权限集合 赋值给状态中的 permission
			state.permission = permission;
		}
	},
	actions:{// 官方不推荐直接修改mutation， 可使用actions来提交 mutation
		
		SET_PERMISSION(context,permission){
			// 提交到 mutation 中的 SET_PERMISSION 函数
			context.commit("SET_PERMISSION",permission);
		}
	}
	
})

//导出store
export default store

4、接下来我就该把从接口获取的数据提交到状态管理中，因为只做为测试，所以没有真正的接口，此处使用模拟数据代替，具体如下：

methods:{
    getPermission(){ // 模拟接口 获取 权限数据集合
      // 模拟获取的数据 有以下几个权限
      let perms = ['search','view','edit','delete'];
      // 用于把权限集合提交到 actions 中的 SET_PERMISSION 函数
      // 第一个为函数名，后面的参数为 我们需要提交的参数，可以是多个
      this.$store.dispatch("SET_PERMISSION",perms);
    }
}

截止到此，我们已经完成了权限的存储。接下来就该如何使用我们存在store中的权限集合来控制按钮的是否可用。

5、首先我们创建 src/permission/index.js 文件 index.js 文件用于判断 按钮所需要的权限是否存在与 store 中，内容如下：

import store from '@/store/index.js'

/**
 * 判断是否有权限。根据传入的权限标识，查看是否存在于用户的权限标识集合内。
 */
export function hasPermission (perms) {
	let hasPermission = false;
	let permission = store.state.permission;
	for (var i = 0; i < permission.length; i++) {
		if(permission[i] === perms){
			hasPermission = true;
			break;
		}
	}
	return hasPermission;
}

6、为了更好的实现功能，我们创建一个按钮组件，所有需要权限控制的按钮我们都用这个组件来替代，创建文件 src/permission/ktButton.vue 内容如下：

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

<script>
  // 禁用标识
  // :disabled="!hasPerms(perms)"
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>

以上内容中 props 为传值问题，需要什么属性 可自行添加，关于父子组件的传值可参考另一篇博文VUE脚手架搭建+Element 组件库table

对于没有权限的按钮是需要不可点击 还是 隐藏状态，只需要把 :disabled 换成 v-if 即可。由于我们的权限不仅限于一个页面，所以需要我们把按钮组件注册到全局，以便其他页面直接使用 而无需再次引入。在 main.js 添加以下内容 ：

// 按钮组件 全局使用
import KtButton from '@/permission/ktButton.vue'

Vue.component("KtButton",KtButton);

7、接下来我们就可以直接在需要进行权限控制的页面直接使用 该组件，如 我在 UserList 页面的操作栏使用：

首先在操作栏 添加相应的 按钮 及权限标识

<el-table-column label="操作" width="360">
	<template slot-scope="scope">

            <KtButton size="mini" @click="handleSelect(scope.$index,scope.row)" label='查看' perms='view' type="primary"/>

            &nbsp;
            <KtButton size="mini" @click="handleUpdate(scope.$index,scope.row)" label='编辑' perms='edit' type="primary"/>

            &nbsp;
            <KtButton size="mini" @click="handleDelete(scope.$index,scope.row)" label='删除' perms='delete' type="danger"/>            
            
	</template>
</el-table-column>

以上 perms 为该按钮 对应的权限标识。由于在 按钮组件中 有一个函数 hasPerms 来判断 是否有权限，所以我们需要在此页面上添加此方法，传入对应的权限标识来判断是否有此权限。

     

methods:{
    hasPerms: function (perms) {
      // 根据权限标识和外部指示状态进行权限判断
      return hasPermission(perms) 
    },
    getPermission(){ // 模拟接口 获取 权限数据集合
      let perms = ['search','view','edit','delete'];
      this.$store.dispatch("SET_PERMISSION",perms);
    }
}

此处的 perms 参数  就是 按钮组件中的 perms='edit' 中的 edit 。那么接下来我们看看页面效果：



由于 之前设置的 权限 是全都有的，所以现在看到的是全部都是可以点击的状态。那么接下来 我们试一下把模拟接口获取的权限集合只保留编辑，操作如下：

getPermission(){ // 模拟接口 获取 权限数据集合
      let perms = ['edit'];
      this.$store.dispatch("SET_PERMISSION",perms);
    },

此时我们再来看看 按钮的状态：



可以看到 我把 查看、删除及搜索的权限全都去掉之后，刷新页面 这三个按钮全都边为了不可点击的状态。说明我们需要实现的按钮权限已经实现。

实现起来还是挺简单的，但是实现的过程却不简单。所以在遇到问题的时候一定要多查阅资料，才能更好的帮助我们解决问题！！！