談前端權限

自從有了先後端分離，前端的工做內容就變得愈加多起來，其中有一項就是權限控制，下面就談一談前端權限。

WHAT
首先咱們要理清前端權限是什麼，我理解的前端權限就是控制前端元素是否可見。由於以前後臺模板時代，咱們的頁面都是經過後臺來渲染的，能不能訪問到頁面直接由後臺邏輯判斷就好。可是如今咱們到了先後端分離時代，全部頁面的元素都由頁面自己來控制，因此頁面路由這塊須要由前端自己來控制了。因此我認爲前端權限有這幾個關鍵點：

前端權限是基於先後端分離之上的
前端只能作視覺上的控制
權限控制不能放在前端，後臺仍是須要對每個接口作驗權

WHY
下面咱們說一說爲何說前端只能作視覺上的控制和權限控制不能放在前端，後臺仍是須要對每個接口作驗權。我以爲其實WEB自己就是圍繞數據來的，因此咱們前端安全，主要是保護咱們的數據，那和數據最緊密接觸的其實仍是後臺，前端自己作得是數據的展現和收集，可是數據的存儲和處理並非由前端來作。因此即便前端能控制住路由/按鈕等不被別人看到，發送請求的方式仍是有不少，徹底能夠繞過前端來請求數據。因此從某種意義上來講，就算前端的權限控制作得再嚴密，可能做用也是有限的。這也引伸了後面一句，後臺仍是要對每個接口作驗權。

HOW
可是前端作權限控制仍是很是有意義的，我以爲在安全性方面來講，前端就顯示人體的皮膚，咱們會是WEB安全的第一道防線。前端要作的工做，我認爲有三種：

前端路由展現
前端按鈕級別展現
調用接口與後臺配合
首先，咱們因此說前端路由展現。這裏其實能夠分爲兩種方式來作路由權限控制：

前端保存全部路由，經過請求獲取權限列表，而後由前端篩選出來可訪問路由進行展現
前端僅保存文件關係，由後臺根據user信息生成路由，經過請求傳遞到前端渲染
第一種方法比較方便，後一種更靈活，好比咱們的頁面須要經過後臺配置訪問，就能夠經過第二種方法來實現。

按鈕級別的展現（Vue示例）

先經過請求獲取到按鈕級別的權限列表
封裝一個公用的篩選方法，再經過v-if調用該方法肯定是否渲染 OR 封裝一個指令（directive）來控制按鈕是否渲染
調用接口與後臺配合

其實咱們最主要的與後臺溝通的方式仍是經過調用接口，與後臺進行數據交流，可是如上所說，後臺仍是須要對每個接口進行鑑權。先後端配合主要有如下幾種方式：

HTTP Basic Authentication
session-Cookie 經常使用
Token-Cookie 經常使用
OAuth(開放受權) -- QQ受權登錄經常使用
已上幾種方法，你們能夠很輕鬆google到相關信息，本篇就不贅述了。

​ By. 北落師門