vueルートの守備（ナビゲーションの守備）とその具体的な使用

最近vueを勉強していますが、ルートの守備というところは知識が多いと思います。そして、とても重要です。ですから、今日は少しノートを追加します。
公式文書
ナビゲーションガードもルートガードであり、ルートブロックでもあります。ユーザーがログインするかどうかはルートブロックで判断できます。このページのユーザーが閲覧する権限があるかどうかは、metaと結合して実現する必要があります。
Vueではルートの守備は全部で3種類あります。一つは全体のルートの守備、一つはコンポーネント内のルートの守備、もう一つはrouterが単独で守ることです。
ルーティング・ガードというのは、家の入り口の警備員として簡単に理解できます。この家に入るには警備員の検査を通して、ルーティング・ガードにどこから来たかを教えなければなりません。見知らぬ人を勝手に入れてはいけませんか？どこに行きますか？警備員が次はどうすればいいですか？もしあなたが確かにこの家の主人が入ることができる人なら、あなたを入れてください。でないと、家の主人に電話して、家主と相談します。権限をあげます。

//                  ，            ，              ，     
to.matched.some(res => res.meta.requireAuth) 

一、全体ルートの守備
全局ルートの守備とは、セルの玄関であり、セル全体がこの一つの玄関にあります。その中のどの家に入るにも、このゲートを通る検査が必要です。
全体のルート守備は二つあります。一つは全体の前衛で、一つは全体の後置守備です。

router.beforeEach((to, from, next) => {
  console.log(to) => //       ？
  console.log(from) => //       ？
  next() => //       
}
router.afterEach（to，from） = {}

next()：コールバック関数のパラメータ設定
next(false)：現在のナビゲーションを中断します。ブラウザのURLが変更されたら（おそらくユーザマニュアルまたはブラウザ後退ボタン）、URLアドレスはfromルーティングに対応するアドレスにリセットされます。
next('/')またはnext({path:'/'):異なるアドレスにジャンプします。現在のナビゲーションは中断され、新しいナビゲーションが行われます。nextに任意の位置のオブジェクトを送ることができます。replace:true、name:homeなどのオプションとrouter-linkで使用するto propまたはrouter.pushでのオプションを設定できます。
二、コンポーネントルーティングの守備

//  methods: {}      ，              vue         
beforeRouteEnter (to, from, next) {
  //   ，       ，        ，      this  ，    vm       
  next(vm => {})
}
beforeRouteUpdate (to, from, next) {
  //     ，         ，
}
beforeRouteLeave (to, from, next) {
  //            
}

三、ルートは単独で守ることを享受する。
ルートの守備はルート設定ページでルート構成に単独に与えられる守備である。

export default new VueRouter({
  routes: [
    {
      path: '/',
      name: 'home',
      component: 'Home',
      beforeEnter: (to, from, next) => {
        // ...
      }
    }
  ]
})

Vue-routerはナビゲーションフックを提供しています。グローバルフロントナビゲーションフックbeforeEachとグローバル後方ナビゲーションフックafterEachは、ルーティングが変更される前と変更後にトリガされます。ですから、ユーザーがログインするかどうかはbeforeEachナビゲーションフックで判断する必要があります。
ナビゲーションフックには3つのパラメータがあります。
  1、to：まもなく入る目標ルートの対象。
  2、from:現在のナビゲーションが離れるルートオブジェクト。
  3、next：この方法を呼び出してから、次のフック関数（afterEach）に入ることができます。
        next()//直接toによるルーティング
        next(false)//現在のルーティングを中断する
        next('route')//ジャンプ指定ルート
        next('error')//ジャンプエラールート
beforeEach:
ルート設定ファイル:

import Vue from 'vue'
import Router from 'vue-router'
import HelloWorld from '@/components/HelloWorld'
import HomePage from '@/pages/home.vue'
Vue.use(Router)
const router=new Router({
 routes: [
  {
   path: '/',
   name: 'HelloWorld',
   component: HelloWorld
  },
   {
   path: '/home',
   name: 'home',
   component: HomePage
  },
   {
    path:'*',
    redirect:'/home'
   }
 ],
})
 router.beforeEach((to,from,next)=>{
  console.log(to);
  console.log(from);
  next();
 })
 export default router;

印刷結果は以下の通りです。

 ユーザー認証を実現するコード:

router.beforeEach((to, from, next) => {
  //                  
 let isLogin = window.sessionStorage.getItem('userInfo');
  if (isLogin) {
    //             。
    next()
  } else {
    //    token       login  
    if (to.path === '/login') {
      next()
    } else {
      next('/login')
    }
  } 
})

afterEach:
beforeEachと違って、afterEachは第三のパラメータnext関数を受け取らないし、ナビゲーション自体も変えられません。普通のbeforeEachは一番多くて、afterEachは少ないです。

router.afterEach((to,from)=>{ //     next
  console.log(to);
  console.log(from);
})

ここでvueルートの守備（ナビゲーションの守備）とその具体的な使用についての文章を紹介します。vueルートの守備内容については以前の文章を検索したり、下記の関連記事を見たりしてください。これからもよろしくお願いします。