資訊專欄INFORMATION COLUMN
摘要：自從有了前后端分離，前端的工作內容就變得越發多起來，其中有一項就是權限控制，下面就談一談前端權限。所以從某種意義上來說，就算前端的權限控制做得再嚴密，可能作用也是有限的。
自從有了前后端分離，前端的工作內容就變得越發多起來，其中有一項就是權限控制，下面就談一談前端權限。
WHAT
首先我們要理清前端權限是什么，我理解的前端權限就是控制前端元素是否可見。因為之前后臺模板時代，我們的頁面都是通過后臺來渲染的，能不能訪問到頁面直接由后臺邏輯判斷就好。但是現在我們到了前后端分離時代，所有頁面的元素都由頁面本身來控制，所以頁面路由這塊需要由前端本身來控制了。所以我認為前端權限有這幾個關鍵點：
前端權限是基于前后端分離之上的
前端只能做視覺上的控制
權限控制不能放在前端，后臺還是需要對每一個接口做驗權
WHY
下面我們說一說為什么說前端只能做視覺上的控制和權限控制不能放在前端，后臺還是需要對每一個接口做驗權。我覺得其實WEB本身就是圍繞數據來的，所以我們前端安全，主要是保護我們的數據，那和數據最緊密接觸的其實還是后臺，前端本身做得是數據的展示和收集，但是數據的存儲和處理并不是由前端來做。所以即使前端能控制住路由/按鈕等不被別人看到，發送請求的方式還是有很多，完全可以繞過前端來請求數據。所以從某種意義上來說，就算前端的權限控制做得再嚴密，可能作用也是有限的。這也引申了后面一句，后臺還是要對每一個接口做驗權。
HOW
但是前端做權限控制還是非常有意義的，我覺得在安全性方面來說，前端就顯示人體的皮膚，我們會是WEB安全的第一道防線。前端要做的工作，我認為有三種：
前端路由展示
前端按鈕級別展示
調用接口與后臺配合
首先，我們所以說前端路由展示。這里其實可以分為兩種方式來做路由權限控制：
前端保存所有路由，通過請求獲取權限列表，然后由前端篩選出來可訪問路由進行展示
前端僅保存文件關系，由后臺根據user信息生成路由，通過請求傳遞到前端渲染
第一種方法比較方便，后一種更靈活，比如我們的頁面需要通過后臺配置訪問，就可以通過第二種方法來實現。
按鈕級別的展示（Vue示例）
先通過請求獲取到按鈕級別的權限列表
封裝一個公用的篩選方法，再通過v-if調用該方法確定是否渲染 OR 封裝一個指令（directive）來控制按鈕是否渲染
調用接口與后臺配合
其實我們最主要的與后臺溝通的方式還是通過調用接口，與后臺進行數據交流，但是如上所說，后臺還是需要對每一個接口進行鑒權。前后端配合主要有以下幾種方式：
HTTP Basic Authentication
session-Cookie 常用
Token-Cookie 常用
OAuth(開放授權) -- QQ授權登陸常用
已上幾種方法，大家可以很輕松google到相關信息，本篇就不贅述了。
? By. 北落師門
文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。
轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/109022.html
摘要：今天呢，我想要說的主題是工作中的前后端交互。古老的表單提交這種形式呢，比較早，以后端為主。前端提交表單，后端驗證。后端基本就做接口，做權限，其他的都交由前端去完成。參數只有一個名字的值這個是后端人員規定的。 這是我寫的第一篇文章，想想還有點小激動呢。本著助人為樂的思想，認識了一些前端的初學者，幫助他們更快的步入到前端這個一個行業。今天呢，我想要說的主題是：工作中的前后端交互。 1.古老...
摘要：公司項目可能需要對架構進行重建，老大給了我一個視頻讓我學習里面的思想，看完后覺得收獲很大，主講人對項目各個層次有很清晰的理解，力求做到職責單一分明，提高可維護性。 公司項目可能需要對架構進行重建，老大給了我一個視頻讓我學習里面的思想，看完后覺得收獲很大，主講人對laravel項目各個層次有很清晰的理解，力求做到職責單一分明，提高可維護性。下面是我看完視頻對其內容的大概整理，以及一些自己...
摘要：先說下我面試情況，我一共面試了家公司。篇在我面試的眾多公司里，只有同城的面問到相關問題，其他公司壓根沒問。我自己回答的是自己開發組件面臨的問題。完全不用擔心對方到時候打電話核對的問題。 2019的5月9號，離發工資還有1天的時候，我的領導親切把我叫到辦公室跟我說：阿郭，我們公司要倒閉了，錢是沒有的啦，為了不耽誤你，你趕緊出去找工作吧。聽到這話，我虎軀一震，這已經是第2個月沒工資了。 公...
閱讀 3967·2021-11-24 09:38
閱讀 1233·2021-10-19 11:42
閱讀 1833·2021-10-14 09:42
閱讀 2159·2019-08-30 15:44
閱讀 547·2019-08-30 14:04
閱讀 2897·2019-08-30 13:13
閱讀 1956·2019-08-30 12:51
閱讀 963·2019-08-30 11:22
