vue專案的許可權控制管理
import cookies from 'js-cookie'
import store from './store'
router.beforeEach(async(to, from, next) => {
if (cookies.get('sessionId')) {
if (to.path === '/login') {
next({ path: '/' }) //有token代表已經登入,那就直接進首頁
} else {
// 有使用者身份後任何跳轉都可以
if (store.state.user.userInfo) {
next()
} else {
// 這裡加許可權校驗(登入後要獲取身份資訊)
const resData = await store.dispatch('user/getInfo') //獲取使用者身份的介面資訊
const isAdmin = ['ADMIN_USER'].includes(resData.userInfo)
store.commit('user/setUserInfo', resData.userInfo)//使用者身份存到倉庫
// asyncRoutes為特殊許可權的路由
const accessRoutes = isAdmin ? asyncRoutes : []
for (let route of accessRoutes) {
// 新增name為home的路由的chiildren 裡
router.addRoutes('home', route)
}
next({...to, replace: true})
}
}
} else {
// 防止無線迴圈
if (to.path === 'Login') {
next() //就是想去登入頁,那就繼續
} else {
next({
path: '/login' //在網址上想跳到其他的路由,則讓其先登入
})
}
}
})