Vueのルーティング傍受（ページにアクセスするためにログインするいくつかの必要性）

序文

要望がある場合は、ログインしていない発見され、プロジェクトを実行しますが、これまでの私の自宅を入力するといった、これは確かに許されないでしょう。ログインしていない場合は裁判官がでプラス記号があるかどうかときに私たちは、家にログイン画面に戻りますが、彼をさせてください、ログイン成功後も入力する前のページにジャンプすることができます。ログインした場合にポイントが指すようにどこ、あなたが愛しています、それは、VUEルーティング傍受です。

PS：私はビット長ったらしいかもしれませんが、唯一の機能を実現したい場合は、かなり明確に話す、また友達になれるの戦闘に直接コードをコピーし、この時間を書くことが10.24であるが、私たちの祭りのプログラマは、最初に私は、あなたに幸せな休日の大物を望みますこの機能を達成するために何BUGは、それが意図的にあなたを助けることを望んで、それについてブログを書く今夜とても幸せではありません！

実際には非常に単純なルーティングインターセプト：1）を加えたメタ。2）router.beforeEachの決意機能はああ見下し具体的には、追加します

次に、コード実装の側面を入力します。

1.まず、例えば、ページをインターセプトする必要性にロゴ、メタルートを追加し、

グローバル配線上のメタを追加します。

{パス"/インデックス"、名称： 'インデックス'、成分：ShowBlogs、メタ：{requireAuth：真 }}、

2.私は、アカウントのユーザー名にログオンしたときにメタがtrueの場合、判決を入力し、次には、グローバルルーティング（通常main.jsの下に書かれたルータのルーティング）次の裁判官を行い、保存されたので、私はこれに応じていますユーザ名が存在しない場合は、彼がログインしていないこと、つまり彼は、ログインページへのルートをジャンプさせ、真のメタを満たすために&&ユーザ名が存在しません。

新しいヴュー（{ 
  EL： '#app' 、
  }、
  ルータ：ルータ、
  店舗、
  コンポーネント：{アプリケーション}、
  テンプレート： '<APP />' 、
   作成（）{ 
    router.beforeEach（（）から、隣 = > {
     VAR _this = この; 
    
   場合（to.meta.requireAuth）{ 

       場合（JSON.parse（localStorage.getItem（ "ログイン"））== nullの）{ 
          はconsole.log（ '没有登录' ）
          。_this $ルータ。プッシュ（{パス： '/' 、クエリ：{リダイレクト：to.fullPathを}}）
          次の（）
       } さもなければ{ 
         
          。_this $のrouter.push（{パス：to.fullPath}）
          次の（）
        } 
    } 
    そうでなければ{ 
     
      次の（）。
    } 
}）。
    
  } 
}）

黒板には、それはノックプロ、濃度の問題に注意を払います

まず第一に：1）このポイントに注意を払う、$ルータの始まりは、これで取得unfindedあり、これは、この時点で保存する場合には、疑問点であることが判明しました。

だから私はVUEは、次の機能の創出にある作成された2）、それはまた、外部に配置することができます

　　　　3）これは最も重要な点は、現在のロジックでの最初の外観は、次のとおりです。最初にこの人生は最初beforeEach関数を入力した後、ルートがルーティングを傍受することが必要であるかどうかを判断する時期別のルートにジャンプするにはクリックしてルーティングされた（メタに基づきます）、それは「/」をスキップしていない場合は、そこにユーザ名の店かどうかを判断する第2の層とを入力し、当社のログインページである、ログインページを入力するだけでなく、新たなルートが、また、ログインページかどうかを判断するのであればルートを傍受する必要がある、なし、成功し跳ね上がりました。最初に入力して、/インデックスこのルートをジャンプしますログイン成功ログインページbeforeEachは、傍受することが必要である、この時のユーザ名が存在し、インデックスに続いてルーティングプッシュして、インデックスがルートをジャンプして入っするbeforeEach、再帰を、我々が見つかりました。いいえ、繰り返しジャンプ・インデックス・ルーティング、抜け出すことができない、私は唯一のメモリオーバーフローを見つけるために、次にconsole.logプリント1,000以上でした。だから私は、正しい操作を以下に示し、制御するための変数を使用する必要があります。

正しい言葉遣い：

新しいヴュー（{ 
  EL： '#app' 、
  データ（）{ 
    リターン{ 
      requireAuthNum： 1 
    } 
  }、
  ルータ：ルータ、
  店舗、
  コンポーネント：{アプリケーション}、
  テンプレート： '<APP />' 、
   作成（）{ 
    ルータ。 beforeEach（（に、次の、から） => {
     VARの _this = この;
   // IF（to.matched.some（レコード=> record.meta.requireAuth））{//判断该路由是否需要登录权限
   場合（に.meta.requireAuth && _this.requireAuthNum == 1 ）{ 

       場合（JSON.parse（localStorage.getItem（ "ログイン"））== NULL）{ 
          にconsole.log（ '没有登录' ）
          _this $のrouter.push（{パス： '/' 、クエリ：{リダイレクト：to.fullPathを}}）
          次の（）
       } 他{ 
          _this.requireAuthNum ++ 。
          。_this $のrouter.push（{パス：to.fullPath}）
          次の（）
        } 
    } 
    そうでなければ{ 
      _this.requireAuthNum = 1 。
      次（）; 
    } 
}）。
    
  } 
}）

　　　　最初に入力して、インデックスのルートをクリック：4）これは、メタができますが、また、彼らは入ることができる前に、変数requireAuthNum 1、散髪のアイデアだけではなく真実である、傍受することが必要である、ユーザ名を指定せずに、ログインページにジャンプし、beforeEachをログインページ成功インデックスページ、新しいルート、来る、最初に入力してジャンプbeforeEachをインターセプトし、する必要があることである1から始まるrequireAuthNumこのことに注意して、/インデックスルーティングをスキップし、条件を満たすために、ユーザ名、そこrequireAuthNum ++は、新しい、2となりルートは、最初に入力しbeforeEachを、傍受する必要性、そしてあるrequireAuthNum ++、および判断の出ていない1、ので、彼は成功したインデックスルーティングをジャンプします。

　　　　テキストを見て見ながら5）私たちはよく見てああ、このブロガーのアイデアが行く従うが必要以上のロジックは、コードを説明し、少し詳細があります：インデックスページとは、ログインページにジャンプするので、私は場合は、ログインしていなかったことログインに成功するとスキップするべき場所のジャンプは私がログインする前に死ぬ書くことができないように、それは私がログインページにジャンプするページを追加する場合、それは成功したログインではないことを、ジャンプインデックスでは、ページ、ログインページを追加するためにジャンプする必要があります以下のような成功したジャンプインデックス、：_this $ router.push（{パス：「/インデックス」}）;.今、あなたは我々がライン112そのユーザ名への私の方法を発見していないかわからない、ダイナミック書か傍受するルートを追加する必要があります{リダイレクト：to.fullPathを}パスは/リダイレクト:? / .......、私はパスのこの時点でここにいたある/リダイレクトされ、この時点で、可能：いいえログインページへのジャンプ、プラスクエリはありません/インデックス、最終的には主記憶に私は次のようにページが、飛び越えその判断、login.vue判決良いランディングページを何をすべきかです：

localStorage.setItem（ "ログイン" 、JSON.stringify（ログイン））; 
            
                リダイレクトしましょう（=は、decodeURIComponentをこの。$ route.query.redirect || '/' ）; 
              
                console.log（リダイレクト）。
                もし（リダイレクト== '/' ）{ 
                    。_this $ router.push（{パス： '/インデックス' }）。
                    console.log（ 'ログイン' ）; 
                } 他{ 
                    。_this $のrouter.push（{パス：リダイレクト}）。
                    console.log（ '重定向回去' ）
                }

これ。$は自動的にコーディングroute.queryので、私は私は、decodeURIComponentデコードを与える必要があります。

リダイレクト裁判官はプリントアウトリダイレクト今回は/インデックス、（キャリーパラメータは他のページに飛ばされる）であるので、我々は判断を下すことができ、オーバーページジャンプに他なりません。
良い夜、一日それを呼び出します！

Vueのルーティング傍受（ページにアクセスするためにログインするいくつかの必要性）

おすすめ