グローバル プレガードは、ユーザーがログインしているかどうかの確認など、ルーティング ジャンプの前にいくつかの操作を実行できます。グローバル フロント ガードのフック関数の名前は beforeEach です。
Vue Router では、ルーターがインスタンス化されるときに beforeEach ガードを追加することで、グローバル プレガードを実装できます。以下に例を示します。
import Vue from 'vue'
import Router from 'vue-router'
Vue.use(Router)
const router = new Router({
routes: [
// ...
]
})
router.beforeEach((to, from, next) => {
// 在这里进行全局前置守卫的操作,如验证用户是否已登录
// to是即将要进入的目标路由对象
// from是当前导航正要离开的路由
// next是一个函数,一定要调用该方法来 resolve 这个钩子
if (to.path === '/login') {
// 如果目标路径是登录页面,则不进行任何操作
next()
}else if (getStorage()) {
// 验证是否有token
next()
} else {
// 如果目标路径不是登录页面,则需要进行登录验证操作
// ...
next()
}
})
export default router
この例では、グローバル フロント ガードのフック関数は beforeEach で、to、from、next の 3 つのパラメーターを受け取ります。ターゲット パスがログイン ページの場合は、ルーティング ジャンプのために next() メソッドを直接呼び出します。ターゲット パスがログイン ページでない場合は、ログイン検証とその他の操作を実行し、最後にルーティングのために next() メソッドを呼び出す必要があります。ジャンプ。