vue處理選單許可權

vue專案處理選單許可權

第一種：後台直接返回選單資料，例如:

menulist:[,

,...
]

:

default
-active=
"routh"
router
:collapse=
"iscollapse"
class
="el-menu-vertical-demo"
:unique-opened=
"true"
>
for=
"(item, index) in menulist"
>
"item.childmenulist"
>
"index + 'index'"
:key=
"index"
>
"title"
>
class
="item.menuicon"
class
="icon iconfont"
>
<
/i>
}<
/span>
<
/template>
v-for=
"(it, d) in item.childmenulist"
:key=
"d":index=
"it.menupath"
class
="child_menu"
:class=""
>
}<
/el-menu-item
>
<
/el-submenu>
<
/template>
else
>
"item.path"
:key=
"index"
class
="main-menus"
>
class
="item.menuicon"
class
="icon iconfont"
>
<
/i>
"title"
>
}<
/span>
<
/el-menu-item>
<
/template>
<
/template>
<
/el-menu>

第二種：後端返回的資料格式與正常路由中的格式差距過大，例如：

[,,

,...
]

先定義乙個選單陣列menulist，menulist中寫入僅通過不同許可權進入的所有頁面

在menulist中新增使用者返回的選單資料的相關資訊，可以用key:value的形式（假設返回的選單資料為returnmenulist）

通過menulist與returnmenulist進行比較，得到最終展示到頁面上的選單lastmenulist

//資料僅供參考，具體按照實際業務邏輯及後端返回資料為準

//假設只有三個頁面
const menulist=[,
,,]//後端返回的使用者選單資訊
let returnmenulist=[,
//a代表頁面1
,//b代表頁面首頁
]//比較menulist 與 returnmenulist 得到lastmenulist
//再將lastmenulist展示到頁面上

let map =

newmap
(object.
entries
(returnmenulist));
let menus = menulist.
filter
(item =>})
/**根據許可權匹配輸入框路由是否有許可權訪問 */
let some = menus.
some
((r)
=>)if
(!some)

vue 選單許可權

src router index.js import vue from vue import router from vue router import store from store import nprogress from nprogress import nprogress nprogre...

VUE動態許可權選單

main.js vue.prototype.routerload else vue meta 獲取選單 loadmenus then res 重新整理後的路由跳轉 router.push catch err 使用鉤子函式對路由進行許可權跳轉 router.beforeeach to,from nex...

Vue選單欄許可權

她早已目視前方從來都不回頭看,加快了步伐從不在乎年華已過半,堅定的眼神 過去的遺憾 話不多說，選單欄許可權 根據後端返回的資料進行渲染 後台返回的資料結構 未處理根據parentid 分離出父子級選單 有null為父級 沒有為子級 側邊導航欄資料結構 處理後的結構 childrenmenulis如果...