vue router+vuexを使ってホームページログイン認証判定を実現する方法

今回は、vue router+vuex を使用してホームページのログイン認証判定を実現する方法と、vue router+vuex を使用してホームページのログイン認証判定を実現する際の注意点を説明します。 以下は実践的なケースです。見てみましょう。

1.vue router

Routing判定 最初に思いつくのは、 router.before各フロントnavigationguard 、このメソッドは from next までの 3 つのパラメータを受け取ります。

to パラメーターはジャンプしようとしているルーティング パス、from は現在のナビゲーションが出発しようとしているルート、次のメソッドはこのフックを解決するために使用されます。

以下は職場で書かれた判断の例です:

router.beforeEach(async (to, from, next) => {
 const { name, meta } = to;
 const { requireLogin } = meta;
 if (name === 'login') { // 如果是登录页则用next方法resolve掉这个钩子，如果不是，进行到下一个判断
  return next();  
 }
 const needLogin = requireLogin && !store.getters.user.isLogin; // 从store中读取是否获取了已登录的信息
 if (needLogin) {
  return next({  // 如果没有则跳转到登录页，将当前路由路径放到参数中
   name: 'login',
   params: { back: to },
  });
 }
 return next(); 
});

2. this.$router と this.$route this.$router.push と this.$router.replace

ログイン時ページ ログイン要求が完了したら、次の操作を実行します

パスに保存されている前のパスのパラメータを取得し、ページにジャンプします

 loginSuccess() {
   const { params: { back } } = this.$route;
   const route = back || { name: 'home' };
   const { name, params, query } = route;
   this.$router.replace({ name, params, query });
  },

上記のコードには、よく混同しがちな 2 つの概念が表示されます:

この .$router はルーター インスタンスであり、ルーティングに直接アクセスするために使用できることを知ってください。ルーター設定内の各オブジェクトをルーティング レコードと呼び、this.$route は各ルーティング レコードにアクセスするために公開されます。したがって、パラメータを取得する場合は this.$route を使用し、ルートにジャンプする場合は this.$router を使用します。

上のコードでは、プッシュの代わりに置換を使用してルートをジャンプしています。この 2 つの違いは、履歴にレコードが生成されるかどうかです。 replace は新しいレコードを追加しませんが、ルーティング レコードを直接置き換えます。

この記事の事例を読んだ後は、この方法を習得したと思います。さらに興味深い情報については、php 中国語 Web サイトの他の関連記事に注目してください。

推奨書籍:

Webpack + React 開発環境を構築する方法

JS を使用してローカル カメラを呼び出す方法

以上がvue router+vuexを使ってホームページログイン認証判定を実現する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。