Vue Auth 是基于 Vue.js 的身份驗證插件，通過它，我們可以輕松實現(xiàn)路由導(dǎo)航守衛(wèi)（Router Navigation Guards）來防止未授權(quán)訪問敏感頁面，內(nèi)容等等。在這個插件中，我們可以使用跳轉(zhuǎn)方式來保護(hù)我們的頁面。

import Vue from 'vue'
import Router from 'vue-router'
import auth from './auth'
Vue.use(Router)
const router = new Router({
routes: [
{
path: '/private',
name: 'Private',
component: Private,
meta: {
requiresAuth: true
}
}
]
})
router.beforeEach((to, from, next) =>{
if (to.matched.some(record =>record.meta.requiresAuth)) {
if (!auth.user.authenticated) {
next({
path: '/login',
query: { redirect: to.fullPath }
})
} else {
next()
}
} else {
next()
}
})
export default router

如上所示，我們可以使用路由導(dǎo)航守衛(wèi)來檢查是否需要進(jìn)行身份驗證。插件引用了auth，在需要身份驗證的路徑中（在組件的路由定義中使用meta字段）將requiresAuth標(biāo)記為true，然后在beforeEach中檢查是否login，如果沒有則跳轉(zhuǎn)到login，并在redirect中設(shè)置redirect路徑。

這是我們?nèi)绾卧赩ue Auth中使用路由守衛(wèi)來實現(xiàn)跳轉(zhuǎn)的一個簡要介紹。此插件還有其他功能，例如提供OAuth登錄集成和JWT身份驗證等，這里就不再贅述了。