在vue中，為確保用戶登錄，使用路由攔截器或者路由守衛判斷登錄狀態，並判斷和處理情況。
路由守衛是什么？
官方文檔的解釋是：
可以用router.beforeEach注冊一個路由守衛
const router = new VueRouter({ ... }) router.beforeEach((to, from, next) => { // ...
})
注:這是一個全局路由，守衛是異步解析執行，此時導航在所有守衛 resolve 完之前一直處於等待中。
而三個參數分別是什么意思呢？
路由導航守衛
to代表我們將要訪問的路徑
from代表我們從哪個頁面路徑跳轉而來
next代表放行的函數
下面用幾個案例展示：
案例一：
//為路由對象，添加before 導航守衛
router.beforeEach((to,from,next)=>{
// 如果用戶訪問的登錄頁，直接放行
if(to.path==='/login') return next()
//從sessionStorage中獲取到保存的token值
const tokenStr=window.sessionStorage.getItem('token')
//沒有token，強制跳轉到登錄頁
if(!tokenStr) return next('/login')
next()
})
案例二：
router.beforeEach((to, from, next) => {
if (to.meta.istoken == true) {
router.push('/目標地址')
return
}
next()
})
{
path: '/edit',
component: edit,
meta: {
istoken: true
}
},
案例三：
思路：【
如果（即將進入的這個路由需要權限才能進入）
{
如果(能獲取到這個老哥的userID){
就讓這個老哥進入這個路由
}否則{
就讓這個老哥進入b這個頁面
}
}
即將進入的路由不需要權限就能進入
{
就讓這個老哥進入這個路由
} 】
對應代碼：
import store from '@/assets/store' //把這個userId獲取過來
router.beforeEach((to,from,next)=>{
if(to.meta.requireAuth){
if(store.state.userId){
next()
}else{
next({path:'/b'})
}
}else{
next()
}
})