摘要：自从有了前后端分离，前端的工作内容就变得越发多起来，其中有一项就是权限控制，下面就谈一谈前端权限。所以从某种意义上来说，就算前端的权限控制做得再严密，可能作用也是有限的。
自从有了前后端分离，前端的工作内容就变得越发多起来，其中有一项就是权限控制，下面就谈一谈前端权限。
WHAT
首先我们要理清前端权限是什么，我理解的前端权限就是控制前端元素是否可见。因为之前后台模板时代，我们的页面都是通过后台来渲染的，能不能访问到页面直接由后台逻辑判断就好。但是现在我们到了前后端分离时代，所有页面的元素都由页面本身来控制，所以页面路由这块需要由前端本身来控制了。所以我认为前端权限有这几个关键点：
前端权限是基于前后端分离之上的
前端只能做视觉上的控制
权限控制不能放在前端，后台还是需要对每一个接口做验权
WHY
下面我们说一说为什么说前端只能做视觉上的控制和权限控制不能放在前端，后台还是需要对每一个接口做验权。我觉得其实WEB本身就是围绕数据来的，所以我们前端安全，主要是保护我们的数据，那和数据最紧密接触的其实还是后台，前端本身做得是数据的展示和收集，但是数据的存储和处理并不是由前端来做。所以即使前端能控制住路由/按钮等不被别人看到，发送请求的方式还是有很多，完全可以绕过前端来请求数据。所以从某种意义上来说，就算前端的权限控制做得再严密，可能作用也是有限的。这也引申了后面一句，后台还是要对每一个接口做验权。
HOW
但是前端做权限控制还是非常有意义的，我觉得在安全性方面来说，前端就显示人体的皮肤，我们会是WEB安全的第一道防线。前端要做的工作，我认为有三种：
前端路由展示
前端按钮级别展示
调用接口与后台配合
首先，我们所以说前端路由展示。这里其实可以分为两种方式来做路由权限控制：
前端保存所有路由，通过请求获取权限列表，然后由前端筛选出来可访问路由进行展示
前端仅保存文件关系，由后台根据user信息生成路由，通过请求传递到前端渲染
第一种方法比较方便，后一种更灵活，比如我们的页面需要通过后台配置访问，就可以通过第二种方法来实现。
按钮级别的展示（Vue示例）
先通过请求获取到按钮级别的权限列表
封装一个公用的筛选方法，再通过v-if调用该方法确定是否渲染 OR 封装一个指令（directive）来控制按钮是否渲染
调用接口与后台配合
其实我们最主要的与后台沟通的方式还是通过调用接口，与后台进行数据交流，但是如上所说，后台还是需要对每一个接口进行鉴权。前后端配合主要有以下几种方式：
HTTP Basic Authentication
session-Cookie 常用
Token-Cookie 常用
OAuth(开放授权) -- QQ授权登陆常用
已上几种方法，大家可以很轻松google到相关信息，本篇就不赘述了。
By. 北落师门
文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。
转载请注明本文地址：https://www.ucloud.cn/yun/109022.html
摘要：今天呢，我想要说的主题是工作中的前后端交互。古老的表单提交这种形式呢，比较早，以后端为主。前端提交表单，后端验证。后端基本就做接口，做权限，其他的都交由前端去完成。参数只有一个名字的值这个是后端人员规定的。 这是我写的第一篇文章，想想还有点小激动呢。本着助人为乐的思想，认识了一些前端的初学者，帮助他们更快的步入到前端这个一个行业。今天呢，我想要说的主题是：工作中的前后端交互。 1.古老...
摘要：公司项目可能需要对架构进行重建，老大给了我一个视频让我学习里面的思想，看完后觉得收获很大，主讲人对项目各个层次有很清晰的理解，力求做到职责单一分明，提高可维护性。 公司项目可能需要对架构进行重建，老大给了我一个视频让我学习里面的思想，看完后觉得收获很大，主讲人对laravel项目各个层次有很清晰的理解，力求做到职责单一分明，提高可维护性。下面是我看完视频对其内容的大概整理，以及一些自己...
摘要：先说下我面试情况，我一共面试了家公司。篇在我面试的众多公司里，只有同城的面问到相关问题，其他公司压根没问。我自己回答的是自己开发组件面临的问题。完全不用担心对方到时候打电话核对的问题。 2019的5月9号，离发工资还有1天的时候，我的领导亲切把我叫到办公室跟我说：阿郭，我们公司要倒闭了，钱是没有的啦，为了不耽误你，你赶紧出去找工作吧。听到这话，我虎躯一震，这已经是第2个月没工资了。 公...
摘要：前言当一切就绪后，就要开始进行规划，这一块是整个框架中非常重要的内容，毕竟对于前端页面来说，只会通过来调用功能。基本上，调用起来是否方便简洁影响着整个体验。那么权限认证应该是怎样的呢根据不同需求，可以划分一个等级。 前言 当一切就绪后，就要开始进行API规划，这一块是整个Hybrid框架中非常重要的内容，毕竟对于前端页面来说，只会通过JS API来调用功能。基本上，API调用起来是否方...
摘要：前言当一切就绪后，就要开始进行规划，这一块是整个框架中非常重要的内容，毕竟对于前端页面来说，只会通过来调用功能。基本上，调用起来是否方便简洁影响着整个体验。那么权限认证应该是怎样的呢根据不同需求，可以划分一个等级。 前言 当一切就绪后，就要开始进行API规划，这一块是整个Hybrid框架中非常重要的内容，毕竟对于前端页面来说，只会通过JS API来调用功能。基本上，API调用起来是否方...
阅读 3772·2021-11-24 09:38
阅读 1726·2021-11-17 09:33
阅读 1056·2021-10-19 11:42
阅读 1687·2021-10-14 09:42
阅读 2055·2019-08-30 15:44
阅读 436·2019-08-30 14:04
阅读 2784·2019-08-30 13:13
阅读 1779·2019-08-30 12:51
