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

WHAT
首先我们要理清前端权限是什么，我理解的前端权限就是控制前端元素是否可见。因为之前后台模板时代，我们的页面都是通过后台来渲染的，能不能访问到页面直接由后台逻辑判断就好。但是现在我们到了前后端分离时代，所有页面的元素都由页面本身来控制，所以页面路由这块需要由前端本身来控制了。所以我认为前端权限有这几个关键点：

前端权限是基于前后端分离之上的
前端只能做视觉上的控制

权限控制不能放在前端，后台还是需要对每一个接口做验权

WHY
下面我们说一说为什么说前端只能做视觉上的控制和权限控制不能放在前端，后台还是需要对每一个接口做验权。我觉得其实WEB本身就是围绕数据来的，所以我们前端安全，主要是保护我们的数据，那和数据最紧密接触的其实还是后台，前端本身做得是数据的展示和收集，但是数据的存储和处理并不是由前端来做。所以即使前端能控制住路由/按钮等不被别人看到，发送请求的方式还是有很多，完全可以绕过前端来请求数据。所以从某种意义上来说，就算前端的权限控制做得再严密，可能作用也是有限的。这也引申了后面一句，后台还是要对每一个接口做验权。

HOW
但是前端做权限控制还是非常有意义的，我觉得在安全性方面来说，前端就显示人体的皮肤，我们会是WEB安全的第一道防线。前端要做的工作，我认为有三种：

前端路由展示
前端按钮级别展示
调用接口与后台配合
首先，我们所以说前端路由展示。这里其实可以分为两种方式来做路由权限控制：

前端保存所有路由，通过请求获取权限列表，然后由前端筛选出来可访问路由进行展示
前端仅保存文件关系，由后台根据user信息生成路由，通过请求传递到前端渲染
第一种方法比较方便，后一种更灵活，比如我们的页面需要通过后台配置访问，就可以通过第二种方法来实现。

按钮级别的展示（vue示例）

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

其实我们最主要的与后台沟通的方式还是通过调用接口，与后台进行数据交流，但是如上所说，后台还是需要对每一个接口进行鉴权。前后端配合主要有以下几种方式：

HTTP Basic Authentication
session-Cookie 常用
Token-Cookie 常用
OAuth(开放授权) -- QQ授权登陆常用

已上几种方法，大家可以很轻松google到相关信息，本篇就不赘述了。

​ By. 北落师门

来自：https://segmentfault.com/a/1190000018436192

链接: https://fly63.com/article/detial/2272