學習總結vue后臺管理系統(tǒng)

后臺頁面的權限驗證與安全性是非常重要的,可以說是一個后臺項目一開始就必須考慮和搭建的基礎核心功能

我們前端所要做的是:? ?不同的權限對應著不同的路由,同時側邊欄也需要根據(jù)不同的權限 ,? 異步生成.

技術棧主要有: vue,vue-router,vuex,axios,vue-cli 3.x(沒有webpack.config.js配置文件,取而代之的是vue.config.js文件), fiddle.php,nodejs(express框架配合myspl搭建過一個簡單的后臺系統(tǒng)框架,cookie.session配合使用,驗證登錄狀態(tài),但是我們這個項目使用的是token來驗證)

一. 登入界面

1.? 登錄: 當用戶填寫完賬號和密碼后向服務端驗證是否正確, 服務端返回一個token,? 拿到token之后(我會將這個token存儲到cookie中,保證刷新頁面后能記住用戶登錄), 前端會根據(jù)token在去拉取一個user_info的接口來獲取用戶的詳細信息(如用戶權限,用戶名等等信息)

2.??權限驗證:? 通過token獲取用戶對應的role,? 動態(tài)根據(jù)用戶的role算出其對應有權限的路由, 通過router.addRoutes動態(tài)掛載這些路由.

這些都是通過VUEX全局管理控制的(補充說明: 刷新頁面后vuex的內容也會丟失)

具體實施:?

????????首先做一個靜態(tài)登入頁面,兩個input的框, 一個登錄賬號,一個登錄密碼,在放置一個登錄按鈕,綁定click事件,點擊登錄之后向服務端提交賬號和密碼進行驗證,在向服務端提交賬號和密碼之前我們前端還可以進行一次簡單的校驗,減輕服務器壓力,優(yōu)化前端代碼

? ? ? ? click綁定登錄按鈕,當點擊按鈕,提交賬號密碼,登錄成功之后在這里推薦是用第三方登錄平臺不重定向到首頁, this.showDialog = true //彈出選擇第三方平臺的dialog,利用this.$store.dispatch提交username信息到vuex中的異步action,并將token儲存在cookie之中,這樣下次打開頁面的時候能記住用戶的登錄狀態(tài),不用在登錄頁面重新登錄了.

注意: 為了安全性,我司在后臺所有token有效期都是seeion,就是瀏覽器關閉了就丟失了,重新打開瀏覽器都需要重新登錄一次,確保用戶不會因為電腦遺失或者其他原因被人隨意使用賬號

1.1. 獲取用戶信息

用戶登錄成功之后,我們在全局鉤子`router.beforeEach`中攔截路由,判斷是否已獲得token,在獲取token之后我們就要去獲取用戶的基本信息了

(同時要注意一點的是: 我們之后存儲一個用戶token,并沒有存儲別的用戶信息{用戶名,用戶頭像等})

(假設我把用戶權限和用戶名存在本地,如果我在這時候有另一臺電腦登錄并修改了自己的用戶名,那再用之前的電腦登錄,,那么他會默認去讀取本地cookie中的名字,并不會去拉取新的用戶信息)

所以現(xiàn)在的策略:

頁面會從cookie中查看是否存在token,沒有,就走一遍上部分的流程重新登錄,如果有token,就會把這個token返給后端去拉取user_info,保證用戶信息是最新的.(如果做了單點登錄功能的話, 用戶信息存儲在本地也是可以得,當你一臺電腦登錄時，另一臺會被提下線，所以總會重新登錄獲取最新的內容)

而且從代碼層面我建議還是把?login和get_user_info兩件事分開比較好，在這個后端全面微服務的年代，后端同學也想寫優(yōu)雅的代碼~

二. 權限篇

在工作中,前端會有一個路由表,他表示了每一個路由可訪問的權限.

1. 用戶登錄之后,通過token獲取用戶的role

2. 動態(tài)根據(jù)用戶的role 算出其對應應有權限的路由

3. 再通過router.addRouetes 動態(tài)掛載路由(這些都只是路由級的,后端的權限是逃不掉的)

????????現(xiàn)在,就是前端來控制頁面級的權限,不同權限的用戶顯示不同的側邊欄和限制其所能進入的頁面(還有少許的按鈕級別的權限控制),后端會驗證每一個涉及請求的操作,驗證其是否有該操作的權限,每一個后臺的請求不管是get還是post都會讓前端在請求header里面攜帶用戶token , 后端會根據(jù)改token來驗證在token是否有權限執(zhí)行該操作,如果沒有權限就會拋出一個對應的狀態(tài)碼,前端測到狀態(tài)碼,做出相應的操作

三. 具體實現(xiàn)

1. 創(chuàng)建vue實例的時候將vue-router掛載 , 但這個時候vue-router掛載一些登錄或者不用權限的公用的頁面

2. 當用戶登錄后, 獲取用role, 將role和路由表每個頁面需要的權限作比較,? 生成最終用戶可訪問的路由表

3. 調用router.addRoutes(store.getters.addRouters)添加用戶可訪問的路由

4. 使用vuex管理路由表,? 根據(jù)vuex中可訪問的路由渲染側邊欄組件

router.js中書寫實現(xiàn)路由表:

1. 首先我們要實現(xiàn)如首頁和登錄頁和一些不用權限的公用頁面vue-router如登錄頁和首頁

2. 之后實例化vue的時候只掛載上面不用權限的路由export default new Router({routers: 上面的路由})

3. 異步掛載路由:? ?動態(tài)需要根據(jù)權限加載路由表,在這里我們根據(jù)vue-router官方推薦的方法meta路線元字段(可以`meta`在定義路徑時包含字段,寫在你children里面)標簽來標示頁面訪問的權限有哪些 `meta: {role: ['admin' , 'super_editor']}` 表示該頁面只有admin個超級編輯才能有資格進入

注意事項:? 這里有一個需要非常注意的地方就是404 頁面一定要最后加載 , 如果放在constantRouterMap 一同聲明了 404 , 后面的所有頁面都會攔截404

main.js數(shù)據(jù)入口文檔(關鍵的main.js)

在main.js中主要用的是router.beforeEach(to,from,next) => { if (store.getters.token) {if (to.path === '/login') {next ({path: '/'}))}}}也就是登錄之后,判斷是否有token,如果沒有,那就在免登錄白名單中查找,如果有就是直接進入,如果沒有那么就跳轉到登錄頁

????????如果有,并且入口路徑to是從/login登錄頁中進入的,那么就redirect重定向跳轉到首頁,

????????否則先判斷當前用戶是否已拉取完user_info信息? if(store.getters.roles.length === 0) , 如果是,那么user_info 拉取info`store.dispatch('GetInfo方法名').then`在從這個異步操作中獲取所有的值,const roles = res.data.role,生成可訪問的路由表store.dispatch('GenerateRoutes', {roles}),在獲取到可訪問的路由表后,我們在動態(tài)添加可訪問的路由表router.addRoutes(store.getters.addRouters)? ,在通過next({ ...to , replace: true})hack方法 確保addRouters 已完成 , set the replace: true

如果沒有拉取到info信息就返回err .catch(err => {console.log(err)})

如果當有用戶權限的時候,說明所有可訪問路由已生成 , 如果沒權限的頁面會自動進入404頁面

如果頁面沒有token時,如果在面登入的白名單中,就直接進入if(whiteList.indexOf(to.path) !== -1){next()} , 否則全部重定向到登入頁面

下面是store/permission.js

這里就是干一件是,通過用戶權限和之前在router.js里面asyncRouterMap的每一個頁面所需要的權限做匹配 , 最后放回一個該用戶能夠訪問路由有哪些

這是一個vuex狀態(tài)管理模式,vuex的狀態(tài)管理是響應式式的,當vue組件從store好讀取狀態(tài)的時候,若store中的狀態(tài)發(fā)生改變 , 那么相應的組件也會發(fā)生改變

但是,你不能直接改變store中的狀態(tài).改變store中的狀態(tài)唯一的途徑就是,顯示的提交(commit ) mutation . 在vue組件中獲取vuex狀態(tài)

封裝hasPermission函數(shù),判斷進入頁面是否需要權限,還有封裝vuex中mobule模塊

側邊欄

基于element-ui的NavMenu側邊欄來實現(xiàn)的

遍歷之前算出來的permission_routers , 通過vuex拿到之后動態(tài)v-for渲染(這里因為一些業(yè)務需要要加很多判斷,比如我們定義路由的時候會加很多參數(shù))

hidden:true? 是否顯示,默認為flase? ?

redirect: noredirect如果重定向為conredirect那么重定向不會再面包屑中顯示?

name: 'router-name'? ?名稱由<keep-alive>(必須設置!!)使用

meta: {role? title? ?icon? ?noCache}??

role: ['admin' , 'editor']??將控制頁面角色(您可以設置多個角色)

title: 'title'? ?子菜單和面包屑中顯示的名稱(推薦集)

icon: 'svg-name'? 側邊欄中顯示的圖標

noCache: true??如果fasle，頁面將不會被緩存(默認為false)

側邊欄高亮問題: element-ui官方給了default-active

:default-active="$route.path" 將default-active一直指向當前路由就可以了，就是這么簡單??

按鈕級別權限控制

現(xiàn)在是通過獲取到用戶的role之后，在前端用v-if手動判斷來區(qū)分不同權限對應的按鈕的。

理由前面也說了，我司顆粒度的權限判斷是交給后端來做的，每個操作后端都會進行權限判斷。而且我覺得其實前端真正需要按鈕級別判斷的地方不是很多，如果一個頁面有很多種不同權限的按鈕，我覺得更多的應該是考慮產品層面是否設計合理。

axios攔截器

首先我們通過request攔截器在每個請求頭里面塞入token，好讓后端對請求進行權限驗證。并創(chuàng)建一個resques攔截器，當服務端返回特殊的狀態(tài)碼，我們統(tǒng)一做處理，如沒權限或者token失效等操作。

兩步驗證

考慮到安全性,簡簡單單一個賬號+密碼的方式很難保證安裝性,推薦借助騰訊的微信或qq作為第三方綁定

賬號和密碼驗證成功之后還需要綁定一個第三方平臺驗證,只需要在原有登錄的邏輯上改造一下就好,登錄成功之后,不直接跳到首頁而是讓用戶兩步登錄,選擇登錄平臺,第三方平臺登錄一樣要通過OAuth2.0授權

如微信還必須是你授權賬號的一級域名。所以你授權的域名是vue-element-admin.com,你就必須重定向到vue-element-admin.com/xxx/下面，所以你需要寫一個重定向的服務，如vue-element-admin.com/auth/redirect?a.com 跳到該頁面時會再次重定向給a.com。

所以我們后臺也需要開一個authredirect頁面：代碼。他的作用是第三方登錄成功之后會默認跳到授權的頁面，授權的頁面會再次重定向回我們的后臺，由于是spa，改變路由的體驗不好，我們通過window.opener.location.href的方式改變hash，在login.js里面再監(jiān)聽hash的變化。當hash變化時，獲取之前第三方登錄成功返回的code與第一步賬號密碼登錄之后返回的uid一同發(fā)送給服務端驗證是否正確，如果正確，這時候就是真正的登錄成功。

外賣后臺管理系統(tǒng)

后臺界面的首頁:

是由element的? 時間區(qū)間插件 , 省市區(qū)級聯(lián)插件,? 樹形插件選擇不同的角色;這幾個條件, 來篩選對應條件的數(shù)據(jù)

????????我們把后臺返回的數(shù)據(jù)放到Echarts的折線圖,餅狀圖里面,每次登錄系統(tǒng)每個角色看到的這個統(tǒng)計數(shù)據(jù)是不一的,這取決于我們前端利用token拉取的user_info接口中所獲取的信息,參數(shù)是不一樣的 ,?這樣做到了有公司管理者對公司整體的運營情況的一個把握

? ? ? ? 我們的有一些系統(tǒng)會給入駐的商家時候,他們可以添加商店 , 我們審核 ,給予相應的權限,我們前端在通過token獲取roel,根據(jù)用戶的roel動態(tài)算出其擁有權限的路由,之后通過router.addRouters動態(tài)掛載這些路由

? ? ? ? 商戶可以上傳一些菜品 , 圖片 , 價格等參數(shù) , 我們后臺人員會檢測到每個商家的經(jīng)營情況 , 動態(tài)的給他們推送一些活動 , 首頁置頂之類的;

? ? ? ? 這里我們使用了 element的Upload上傳插件;? Transfer 穿梭框插件,? Form插件,? Table表格插件,? Pagination 分頁插件

? ? ? ? 在利用flex布局,布局: 頭部固定,左邊固定,右邊自適應? display: flex;??

flex布局中分為主軸方向和交叉軸:
主軸方向: 我們在彈性容器上通過flex-direction修改主軸方向;如果主軸方向改變那么交叉軸也會變它有幾個屬性,分為row左->右 , column上->下 , row-reverse左<-右 , column-reverse上<-下

彈性布局永遠沿著主軸排列,當主軸排列不下,我們可以通過flex-wrap進行換行 , nowrap,不換行 一行顯示 , wrap換行下一行顯示 , wrap-reverse 反向換行

復合屬性: flex-flow = flex-drection + flex-wrap

復合屬性flex = flex-grow + flex-shrink + flex-basis? ??

flex-grow: 放大比例? ? ? flex-shrink生效前的尺寸? ? ? ? ?flex-basis設置的是元素在主軸上的初始尺寸

主軸上元素的對齊方式: justify-content: flex-start默認左->右 , flex-end左<-右 , center居中 ,? ?space-between左右對齊中間自適應 , space-around平分剩余空間

交叉軸上的對齊方式: align-items

stretch: 默認值,會在交叉軸方向撐滿? ? ? ? flex-start沿前端? ? ? ? flex-end沿交叉軸終點對齊? ? ? ? center沿交叉軸中點對齊? ? ? ? baseline沿第一行文字的基線對齊...