一剪个、場景
前后端分離spa頁面權(quán)限設(shè)置
二沪铭、技術(shù)棧
vue全家桶
三届巩、實(shí)現(xiàn)效果
登錄頁面
四硅瞧、實(shí)現(xiàn)原理
vueRouter控制前端頁面跳轉(zhuǎn)路由，當(dāng)?shù)卿洺晒笏』悖祷赜脩舻卿泃oken信息腕唧，將token信息放到store中，router路由跳轉(zhuǎn)取store中狀態(tài)有token時瘾英，當(dāng)取到token時跳轉(zhuǎn)到首頁枣接，反之跳轉(zhuǎn)到登錄頁
登錄校驗(yàn)
路由配置
vueRouter.beforeEach((to, from, next) => {
if (to.meta.requireAuth) {
// 判斷該路由是否需要登錄權(quán)限
console.log(store)
if (store.state.root.token) { // 通過vuex state獲取當(dāng)前的token是否存在
next()
} else {
alert('請登錄')
next({
path: '/' //登錄路由
})
}
} else {
next()
}
})
五、全局守衛(wèi)-官方文檔
全局守衛(wèi)
