beforeEachフロントルーティングガードビュー

ルートガード：この用語は明らかに古代都市の前で警備している兵士に似ています。パスが兵士によって認識された場合にのみパスに入ることができます。パスに会わないか持っていない場合は、街に入らないでください。これも安全のためです。

同じことがvueのルーティングガードにも当てはまります。これは通常、ルーティング要求をインターセプトするために使用されます。

シナリオの使用：

通常、ログインインターセプトで使用され、グローバルまたはローカルにすることができます。
バックグラウンド管理システムとして、さまざまなユーザー権限に応じてさまざまなコンテンツが表示されます。

主なアイデア：

ログインが成功すると状態が保存され、localStorage / sessionStorage / storeのいずれかに配置できます。
次に、ルーティングフックを介して判断します。条件が満たされている場合はシステムに入ることができ、条件が満たされていない場合はログインページが引き続き表示されます。

要件の説明：

Webサイトにログインしておらず、アドレスバーを変更して直接入力したい場合。セキュリティ上の理由から許可されていません。このとき、フロントガードroute.beforeEachルートを設定できます。

コード：

次のコードはログインインターフェイスです。ストレージの状態sessionStorage.setItem（ "isLogin"、true）;

  let params = {
        mobile: Number(this.mobile),
        captcha: Number(this.captcha),
        type: 2,
      };
      loginApi.login(params).then((res) => {
        if (res.code == 1) {
          this.$toast("登录成功");
          sessionStorage.setItem("isLogin", true);
          // localStorage.setItem("token", res.token);
          this.$router.push({
            name: "invoiceList",
            query: {
              housecode: this.housecode,
              ownername: this.ownername,
            },
          });
        } else {
          this.$toast(res.message);
        }
      });
    },

部分ページ：フロントルーティングを設定する

export default {
  beforeRouteEnter(to, from, next) {
    if (sessionStorage.getItem("isLogin") && to.query.housecode) {
      next();
    } else {
      next({ path: "/login", query: { Rurl: to.fullPath } });
    }
  }
  }

フロントルーティングガードが詳細に導入されています。

https://www.cnblogs.com/lhl66/p/9195787.html

beforeEachフロントルーティングガードビュー

おすすめ