Vue 配合eiement動態路由,許可權驗證
1.要實現動態路由,只需要在main.js中將所有路由表先規定好,如下圖
const routes=[
{path:'/login',component:login},/*登入*/
{path:'/home',component:home},/*首頁*/
{path:'/monitor',component:monitor},/*實時監控*/
{path: "/orderQuery", component: orderQuery},/*電子圍欄*/
{path: "/fenceSet", component: fenceSet},/*電子圍欄*/
{path:'/orderCenter',component:orderCenter},/*訂單中心*/
{path:'/carctlExamine',component:carctlExamine},/*車管員審批*/
{path:'/partExamine',component:partExamine},/*部門領導審批*/
{path:'/vpExamine',component:vpExamine},/*副總審批*/
{path:'/distribute',component:distribute},/*排程派單*/
{path:'/receipt',component:receipt},/*回執*/
{path:'/trajectory',component:trajectory},/*軌跡回放*/
{path:'/statistics',component:statistics },/*統計*/
{path:'/car',component:car},/*車輛管理*/
{path:'/user',component:user},/*使用者管理*/
{path:'/equipment',component:equipment},/*裝置管理*/
{path:'/group',component:group},/*小組維護*/
{path:'/driver',component:driver},/*駕駛員管理*/
{path: '/company', component: company},/*公司管理*/
{path: '/adminManage', component: adminManage},/*公司員管理*/
{path: '/roleManage', component: roleManage},/*角色管理*/
{path:'/systemDaily',component:systemDaily },/*系統日誌*/
];
2.把前端路由表發給後臺和後臺協商返回的資料形式,在app.vue中,使用《el=menu》迴圈出來後臺返回的路由表如下圖,
<el-menu
:default-active="$route.path"
class="el-menu-demo"
mode="horizontal"
@select="handleSelect"
background-color="#545c64"
text-color="#fff"
active-text-color="#85ffca">
<el-menu-item :index="item.path" v-for="item in pathList"
v-if="item.path!=null" :key="item.id" >
<router-link :to="item.path">{{item.name}}</router-link>
</el-menu-item>/*一級導航*/
<el-submenu v-if="item.path==null" :key="item.id":index="item.name" v-for="item in pathList">
<template slot="title">{{item.name}}</template>
<el-menu-item v-for="child in item.children" :index="child.path"
:key="child.id" v-if="child.path!=null" >/*二級導航*/
<router-link :to="child.path">{{child.name}}</router-link>
</el-menu-item>
<el-submenu v-if="child.children!=[]&&child.path==null" v-for="child in item.children":key="child.id":index="child.name" >
<template slot="title">{{child.name}}</template>
<el-menu-item v-for="three in child.children":index="three.path":key="three.id">/*若存在三級導航*/
<router-link :to="three.path">{{three.name}}</router-link>
</el-menu-item>
</el-submenu>
</el-submenu>
</el-menu>
這樣就可以在登入的時候根據介面獲取到當前使用者所擁有的許可權以及路由表,這樣動態路由就做好了 。我們是根據頁面來確定許可權的,沒有頁面就代表沒有許可權無法檢視頁面
相關文章
- Vue | 自定義指令和動態路由實現許可權控制Vue路由
- 使用動態路由實現許可權管理路由
- vue-router控制路由許可權Vue路由
- 如何用 Vue 實現前端許可權控制(路由許可權 + 檢視許可權 + 請求許可權)Vue前端路由
- Vue管理系統前端系列六動態路由-許可權管理實現Vue前端路由
- vue.js除了動態路由,前端許可權還可以這麼玩Vue.js路由前端
- mysql之許可權驗證MySql
- Vue許可權路由實現總結Vue路由
- Fake許可權驗證小例子
- vue許可權路由實現方式總結Vue路由
- 關於動態許可權
- 資料許可權技術驗證
- 資料許可權驗證MyBatis版MyBatis
- android動態許可權到自定義許可權框架Android框架
- vue許可權路由實現方式總結二Vue路由
- 小知識:軟體開發的許可權控制和許可權驗證
- vue router 許可權Vue
- (精華)2020年7月14日 vue vue-router動態路由的實現許可權控制Vue路由
- 前端許可權管理之 addRoutes 動態載入路由踩坑前端路由
- Android動態許可權總結Android
- 動態SQL 無許可權錯誤SQL
- delphi安卓動態許可權申請安卓
- 前端如何配合後端完成RBAC許可權控制前端後端
- nodejs rbac 許可權驗證(匿名,普通,admin)NodeJS
- ASP.NET MVC許可權驗證 封裝類ASP.NETMVC封裝
- vue後臺管理系統學習(6)--路由和許可權Vue路由
- [譯] 用 React 和 Node.js 實現受保護的路由和許可權驗證ReactNode.js路由
- 記一次vue-element-admin 的動態路由許可權管理和選單渲染的學習Vue路由
- Hadoop 許可權認證Hadoop
- spring boot 利用註解實現許可權驗證Spring Boot
- vue+element-ui實現動態的許可權管理和選單渲染VueUI
- Android6.0動態許可權管理庫Android
- 許可權系統設計(5)--動態性
- spring security許可權認證Spring
- vue vuex vue-router後臺專案——許可權路由(超詳細簡單版)Vue路由
- 動態許可權相關的幾個庫分析
- Android6.0許可權的動態適配Android
- Android優雅地申請動態許可權Android