自從有了前后端分離，前端的工作內(nèi)容就變得越發(fā)多起來，其中有一項就是權限控制，下面就談一談前端權限。
WHAT
首先我們要理清前端權限是什么，我理解的前端權限就是控制前端元素是否可見。因為之前后臺模板時代，我們的頁面都是通過后臺來渲染的，能不能訪問到頁面直接由后臺邏輯判斷就好。但是現(xiàn)在我們到了前后端分離時代，所有頁面的元素都由頁面本身來控制，所以頁面路由這塊需要由前端本身來控制了。所以我認為前端權限有這幾個關鍵點：
- 前端權限是基于前后端分離之上的
- 前端只能做視覺上的控制
- 權限控制不能放在前端，后臺還是需要對每一個接口做驗權
WHY
下面我們說一說為什么說前端只能做視覺上的控制和權限控制不能放在前端，后臺還是需要對每一個接口做驗權。我覺得其實WEB本身就是圍繞數(shù)據(jù)來的，所以我們前端安全，主要是保護我們的數(shù)據(jù)，那和數(shù)據(jù)最緊密接觸的其實還是后臺，前端本身做得是數(shù)據(jù)的展示和收集，但是數(shù)據(jù)的存儲和處理并不是由前端來做。所以即使前端能控制住路由/按鈕等不被別人看到，發(fā)送請求的方式還是有很多，完全可以繞過前端來請求數(shù)據(jù)。所以從某種意義上來說，就算前端的權限控制做得再嚴密，可能作用也是有限的。這也引申了后面一句，后臺還是要對每一個接口做驗權。
HOW
但是前端做權限控制還是非常有意義的，我覺得在安全性方面來說，前端就顯示人體的皮膚，我們會是WEB安全的第一道防線。前端要做的工作，我認為有三種：
- 前端路由展示
- 前端按鈕級別展示
- 調用接口與后臺配合
-
首先，我們所以說前端路由展示。這里其實可以分為兩種方式來做路由權限控制：
- 前端保存所有路由，通過請求獲取權限列表，然后由前端篩選出來可訪問路由進行展示
- 前端僅保存文件關系，由后臺根據(jù)user信息生成路由，通過請求傳遞到前端渲染
第一種方法比較方便，后一種更靈活，比如我們的頁面需要通過后臺配置訪問，就可以通過第二種方法來實現(xiàn)。
-
按鈕級別的展示（Vue示例）
- 先通過請求獲取到按鈕級別的權限列表
- 封裝一個公用的篩選方法，再通過v-if調用該方法確定是否渲染 OR 封裝一個指令（directive）來控制按鈕是否渲染
-
調用接口與后臺配合
其實我們最主要的與后臺溝通的方式還是通過調用接口，與后臺進行數(shù)據(jù)交流，但是如上所說，后臺還是需要對每一個接口進行鑒權。前后端配合主要有以下幾種方式：
- HTTP Basic Authentication
- session-Cookie 常用
- Token-Cookie 常用
- OAuth(開放授權) -- QQ授權登陸常用
已上幾種方法，大家可以很輕松google到相關信息，本篇就不贅述了。
博客地址 北落師門
