0.前言
记得当年面试的时候,面试官问我,前端怎么做权限控制,咱也不太会这个,只能尴尬回答道:“都是老大搭的架子,我只负责写业务模块代码”。
如今自己也做了很多项目了,觉得有必有对前端权限控制做一个总结。

前端权限控制一直是前端必须掌握的一个知识点,一般来说稍微正规一点的后台系统肯定有权限控制。当然还是那句老话,前端本来就是不安全的,真正的安全还是需要后端兄弟去把关,所以后端也必须按做权限控制!我们前端的权限校验主要的目的是过滤不该有的请求和操作,减少服务端压力。

我个人认为前端权限控制应该分为四个方面,接口权限、按钮权限,页面权限,路由权限,下面就分四个部分探讨下权限控制怎么做

1.接口权限
原则
接口权限最简单,目前一般采用jwt的形式来验证,没有通过的话一般返回401 Authentication Required

登录完拿到Token,将token存起来(cookie或者ssessionStorage),每次登录的时候头部携带token就行了(axios请求拦截器实现)。

伪码实现
const {token} = login()
cookie.set('token',token)
axios.interceptors.request.use(config => {
config.headers['token'] = cookie.get('token')
return config
})

2.按钮权限
原则
一个页面会有新增,删除,编辑等等按钮。不同用户应该是有不同操作权限的。
我们不妨定义权限码 0:不可见 1:不可编辑 2:可编辑
我们提前和后端约定好按钮的名字,后端会返回一个按钮权限列表。然后我们根据权限列表使用v-if指令或者 绑定disabled属性达到相应权限效果。
当然更好的最好是自己写一个自定义权限指令,实质就是根据相应权限操作dom

伪码实现
比如概览页面的编辑按钮 名字先和后端定义好叫做overview-edit

// overviwe.vue overview是概览页面的路由名
...