本文主要介紹在vue專案中如何進行前端許可權控制。
路由許可權
路由許可權就是使用者只能訪問到自己有許可權訪問到的頁面，對於無許可權的頁面可以跳轉到404頁面或者無許可權提示。下面通過兩種方式來實現對路由的許可權控制。
1.動態生成路由表
第一種方式是動態生成路由表，前端原始的路由表中只儲存一些基礎的路由，獲取許可權之後根據使用者擁有訪問許可權的路由資訊構建乙個路由表並動態新增進路由表中，這樣就保證了無許可權的路由根本沒有被掛載，也就無法被訪問。
該功能的實現主要使用了vue-router所提供的addroute方法，通過該方法可以動態地往路由表中新增路由。下面看一下具體的實現。
// router.js
// 前端的路由表中只保留了首頁和404的路由
export
default
newrouter(,
]})// main.js
import router from
'./router'
// 假設使用者擁有的路由許可權如下
const permission =[,
]}]}
]// 遞迴生成乙個路由配置
function
createrouteconfigbypermission
(permission)
= item
let= parent
let path =`$
/$` let route =
routefactory()
if(children)
if(parentchildren)
else})
}walk
(permission, routeconfig)
return routeconfig
}// 生成route的工廠函式，route包括path，name，component，children等屬性
function
routefactory
(options =
)= route
parentname = parentname || name
if(children)
route.
component=(
)=>
import
(`@/views/$/
$`)return route
}// 使用router.addroutes新增路由表
router.
addroutes
(createrouteconfigbypermission
(permission)
)
2.全域性路由攔截
第二種進行路由許可權控制的方式是使用全域性的路由攔截，也就是在每次路由跳轉時，對要跳轉的路由進行判斷，若使用者有許可權訪問則成功跳轉，否則就進行提示或者跳轉到對應頁面。
import router from
'./router.js'
// 使用者許可權
const permission =
router.
beforeach
((to,
from
, next)
=>
else
})
元件許可權是指使用者有沒有許可權檢視或者操作頁面中的元件，包括按鈕、鏈結等。
指令控制
實現元件許可權控制的方式只要實現乙個通用的haspermission指令即可。具體實現如下
// 使用者許可權
const permission =
vue.
directive
('haspermission',}
})// 使用
"primary" v-has-permission=
"class/add"
>新增班級<
/el-button>
"primary" v-has-permission=
"class/edit"
>編輯班級<
/el-button>
<
/div>
<
/template>
進行前端的許可權控制可以提高應用的安全性和使用者的體驗，但是並不能完全依賴前端，後端的許可權控制才是最關鍵的。
前端Vue專案的執行
安裝成功以後，我們可以通過npm v命令，檢視安裝的版本。npm v然後我們輸入npm config set registry 映象位址，配置我們的npm映象。npm config set registry http 映象位址 npm config ls 命令可以檢視我們配置的npm映象位址 npm...
restful專案的許可權控制實現技巧
最近的專案在用restful風格在寫，果然url都有了意義，功能都可以從url中推測出來，restful的url和非restful的url最大的乙個感官區別就是，rest的url可能存在一些變數，比如下面這樣 check api user 12345 history，這個url解釋起來就是 檢視賬號...
nginx部署vue前端專案的dist包
以nginx作為容器部署vue的前端專案 首先幾條必備的linux命令 1 進入nginx目錄 cd usr local nginx 2 啟動nginx sh sbin nginx 3 停止nginx sbin nginx s stop 4 重啟nginx sbin nginx s reload 5...