谈前端权限

自从有了先后端分离，前端的工做内容就变得愈加多起来，其中有一项就是权限控制，下面就谈一谈前端权限。

WHAT
首先咱们要理清前端权限是什么，我理解的前端权限就是控制前端元素是否可见。由于以前后台模板时代，咱们的页面都是经过后台来渲染的，能不能访问到页面直接由后台逻辑判断就好。可是如今咱们到了先后端分离时代，全部页面的元素都由页面自己来控制，因此页面路由这块须要由前端自己来控制了。因此我认为前端权限有这几个关键点：

前端权限是基于先后端分离之上的
前端只能作视觉上的控制
权限控制不能放在前端，后台仍是须要对每个接口作验权

WHY
下面咱们说一说为何说前端只能作视觉上的控制和权限控制不能放在前端，后台仍是须要对每个接口作验权。我以为其实WEB自己就是围绕数据来的，因此咱们前端安全，主要是保护咱们的数据，那和数据最紧密接触的其实仍是后台，前端自己作得是数据的展现和收集，可是数据的存储和处理并非由前端来作。因此即便前端能控制住路由/按钮等不被别人看到，发送请求的方式仍是有不少，彻底能够绕过前端来请求数据。因此从某种意义上来讲，就算前端的权限控制作得再严密，可能做用也是有限的。这也引伸了后面一句，后台仍是要对每个接口作验权。

HOW
可是前端作权限控制仍是很是有意义的，我以为在安全性方面来讲，前端就显示人体的皮肤，咱们会是WEB安全的第一道防线。前端要作的工做，我认为有三种：

前端路由展现
前端按钮级别展现
调用接口与后台配合
首先，咱们因此说前端路由展现。这里其实能够分为两种方式来作路由权限控制：

前端保存全部路由，经过请求获取权限列表，而后由前端筛选出来可访问路由进行展现
前端仅保存文件关系，由后台根据user信息生成路由，经过请求传递到前端渲染
第一种方法比较方便，后一种更灵活，好比咱们的页面须要经过后台配置访问，就能够经过第二种方法来实现。

按钮级别的展现（Vue示例）

先经过请求获取到按钮级别的权限列表
封装一个公用的筛选方法，再经过v-if调用该方法肯定是否渲染 OR 封装一个指令（directive）来控制按钮是否渲染
调用接口与后台配合

其实咱们最主要的与后台沟通的方式仍是经过调用接口，与后台进行数据交流，可是如上所说，后台仍是须要对每个接口进行鉴权。先后端配合主要有如下几种方式：

HTTP Basic Authentication
session-Cookie 经常使用
Token-Cookie 经常使用
OAuth(开放受权) -- QQ受权登录经常使用
已上几种方法，你们能够很轻松google到相关信息，本篇就不赘述了。

​ By. 北落师门