vue 選單許可權

2021-10-23 20:15:36 字數 4546 閱讀 2244

src/router/index.js

import vue from

'vue'

import router from

'vue-router'

import store from

'../store'

import nprogress from

'nprogress'

import

'nprogress/nprogress.css'

import

from

'@/utils/auth'

import getpagetitle from

'@/utils/get-page-title'

vue.

use(router)

/* layout */

import layout from

'@/layout'

export

const constantroutes =

[//必有路由,不用設定許可權的路由]}

,,,,

,}]}

]const

createrouter=(

)=>

newrouter()

, routes: constantroutes})

const router =

createrouter()

export

function

resetrouter()

// 捕獲許可權

router.

beforeeach

(async

(to,

from

, next)

=>

else

else

else

else)}

}}}}

)router.

aftereach((

)=>

)export

default router

src/store/getters.js

const getters =

export

default getters

src/store/modules/global.js

// import * as s from '@/utils/sessionstorage'

import

*as ls from

'@/utils/localstorage'

import

from

'@/router/modules/privilege'

import router from

'@/router'

import

from

'@/router'

const global =

, mutations:

, setprivilege: state =>},

actions:

, payload)

=>

else

commit

('setpermission'

, permission)

// 解決重定向404問題

>啦啦啦<

/h3>

<

/div>

"賬號:" prop=

"account"

:rules=

"">

"loginform.account" placeholder=

"請輸入賬號" clearable /

>

<

/el-form-item>

"密碼:" prop=

"password"

:rules=

"">

"loginform.password" type=

"password" placeholder=

"請輸入密碼" @keyup.enter.native=

"handlelogin"

/>

<

/el-form-item>

="btn-login"

:loading=

"loading" type=

"primary" style=

"" @click.native.prevent=

"handlelogin"

>登入<

/el-button>

<

/el-form>

<

/div>

<

/template>

import

from

'vuex'

export

default

,data()

, passwordtype:

'password'

, capstooltip:

false

, loading:

false

, redirect: undefined,

otherquery:}}

, watch:},

immediate:

true}}

,created()

,mounted()

,destroyed()

,// eslint-disable-next-line vue/order-in-components

computed:

, methods:

else},

handlelogin()

)})}

)this

.loading =

false})

.catch((

)=>)}

else})

},getotherquery

(query)

return acc

},)}}

}<

/script>

src/router/modules/privilege.js

import jenkinsrouter from

'./jenkins'

import deliveryrouter from

'./delivery'

import grayenvironmentrouter from

'./grayenvironment'

import systemmanagerouter from

'./systemmanage'

export

const asyncroutermap =

[//裡面的每一項就是需要許可權的路由

jenkinsrouter,

deliveryrouter,

grayenvironmentrouter,

systemmanagerouter

]

src/router/modules/jenkins.js

import layout from

'@/layout'

const jenkinsrouter =

, children:[}

,},}

]}export

default jenkinsrouter

VUE動態許可權選單

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

vue處理選單許可權

vue專案處理選單許可權 第一種 後台直接返回選單資料,例如 menulist 資料返回後,直接拿到el menu中去遍歷 個人使用的elementui default active routh router collapse iscollapse class el menu vertical de...

Vue選單欄許可權

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