今天給大家寫一篇關於vue校驗登錄狀態,如果是非法登錄就跳轉到登錄頁面的效果
它的具體實現是一個router.beforeEach的鉤子,每次路由切換時觸發,寫法如下
router.beforeEach((to, from, next) => {
next()
})
beforeEach函數有三個參數:
- to:即將進入的路由對象
- from:當前導航即將離開的路由
- next,進行管道中的一個鉤子,如果執行完了,則導航的狀態就是 confirmed (確認的);否則爲false,終止導航。
使用案例Demo
限制登陸功能,具體實現思路:每次跳轉路由是判斷本地 localStorage.getItem('token') 狀態
路徑:找到router->index.js如下
import Vue from 'vue'
import Router from 'vue-router'
Vue.use(Router)
const router = new Router({
routes: [{
path: '/',
name: 'HelloWorld',
component: HelloWorld
},
{
path: '/login',
name: 'login',
component: login
}
]
})
//下面是重點
router.beforeEach((to, from, next) => {
let token = localStorage.getItem('token')
if (to.path == '/login') {
next()
} else {
if (token == '' || token == null) {
next('/login');
} else {
next()
}
}
})
export default router;
解釋:index.js寫成如上形式,用const router 接受 new Router對象,最後export暴露出去
router.beforeEach 在每次路由跳轉出發
let token = localStorage.getItem('token') 獲取本地沒有沒token 如果沒有就跳到login頁面 很簡單的邏輯