vue でログインせずにページがレンダリングされないようにする方法

Vue では、ユーザーがログインしていないときにページをレンダリングできない状況がよく発生します。ユーザーが特定のページにアクセスするには対応する権限を持っている必要があるため、この問題は実際のアプリケーションではよく発生します。

この問題を解決するには、Vue のルーティングにグローバル ルーティング ガードを定義して、ユーザーがログインしていないときのページのレンダリングを禁止します。

以下、この機能の実装方法を具体例を交えて紹介します。

最初のステップはルーティング ガードを定義することです

Vue では、ルーティング ガードを定義することでルートのアクセス許可を制御できます。このプロセスでは、「beforeEach」という名前のルーティング フック関数を使用する必要があります。この関数は、各ルーティング スイッチの前に呼び出されます。

具体的には、次のコードをルーティング定義に追加できます。

router.beforeEach((to, from, next) => {
  const isLogin = localStorage.getItem("token");  // 判断是否有登陆态
  if (to.meta.requireAuth) {  // 判断当前路由是否需要进行权限判断
    if (isLogin) {  // 已经登陆
      next();
    } else {  // 没有登陆，跳转到登陆页面
      next({
        path: "/login",
        query: {
          redirect: to.fullPath  // 记下跳转前的 url，为了登陆后自动跳转回原页面
        }
      });
    }
  } else {
    next();
  }
});

上記のコードでは、まずユーザーが「localStorage」を介してログイン ステータスを持っているかどうかを判断し、次に、現在のルートは許可の判断が必要です。判断が必要だがユーザーがログインしていない場合は、ログインに成功した後に自動的に元のページに戻るために、ログイン ページにジャンプし、現在のページの URL を記録します。

「localStorage」は HTML5 の新機能であり、クライアント側でデータを保存する方法を提供するものであることに言及する価値があります。ログインに成功すると、トークンを「localStorage」に保存して、その後のルーティングの決定に使用できるようにします。

2 番目のステップは、許可の判断が必要なルートを定義することです。

ルートを定義するとき、「メタ」フィールドを使用して、現在のルートが許可の判断が必要かどうかをマークできます。権限判定が必要な場合は、ルート定義に以下のコードを追加します。

const router = new VueRouter({
  routes: [
    {
      path: "/home",
      name: "home",
      component: Home,
      meta: { requireAuth: true }  // 需要进行权限判断
    },
    {
      path: "/login",
      name: "login",
      component: Login
    }
  ]
});

上記のコードでは、権限判定が必要なルートに「meta: { requireAuth: true }」フィールドを追加しています。権限の判断が必要です。

3 番目のステップは、ログイン関数を実装することです

最後に、ログイン関数を実装する必要があります。ユーザーが正常にログインしたら、トークンを「localStorage」に保存してリダイレクトする必要があります。以前に保存した URL に移動します。

具体的には、ログイン ページに次のコードを追加できます:

methods: {
  login() {
    // 登陆成功后，存储 token
    localStorage.setItem("token", "userToken");

    // 重定向到之前存储的 url
    if (this.$route.query.redirect) {
      this.$router.push(this.$route.query.redirect);
    } else {
      this.$router.push("/");
    }
  }
}

上記のコードでは、ログインに成功した後、トークンを「localStorage」に保存し、以前に保存されている場所にリダイレクトします。 URL。

概要

上記の手順により、Vue でルーティング許可制御を簡単に実装できます。実際のアプリケーションでは、独自のニーズに応じてルーティング ガードを柔軟に構成し、より複雑な権限制御メカニズムを実現できます。

一般に、Vue はフロントエンド フレームワークで広く使用されており、Vue のルーティング制御も非常に重要な側面です。上記の方法は、Vue のルーティング許可制御ソリューションの中でも非常に代表的な方法と言えるので、Vue のルーティング許可制御を学ぶ人にとっては非常に参考になるものです。

以上がvue でログインせずにページがレンダリングされないようにする方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。