イントロ

今日はVue3でログインしていないユーザーをログイン画面に飛ばす方法を紹介します。

この方法以外にもこの目的を達成できる方法が色々ありますがVue-Routerを使ったやり肩が簡単だと思ったので参考にしてみてください。

ユーザーを判断するシステムを作る

Vueアプリにアクセスしたユーザーを判断するシステムがないことにはユーザを振り分けることができませんね。

今回は、ログインしていないユーザーをどうやって判断するかを紹介します。

前回紹介した記事でトークン認証を使ったログインの仕方を紹介しました。

では、これを使って、トークンのないユーザーをはじき出しましょう。

localStrageについて

今回は単純にブラウザのローカルストレージにデータを保管していますが、もし複雑なデータをあるかうようでしたらVuexというState Managementシステムでも同じことができます。

Vue Routerについて

Vue-RouterはVueのライブラリでURLのルーティング、もしくはページのコンポーネントを担当するメカニズムの事です。

Metaについて

このコードを見て分かるようにそれぞれのルートにmetaを設定することができます。

今回は一番ふさわしいrequireAutrhというキーで名前を付けましたが、adminOnlyでも、firstTimeでも何でも良いです。

で、このキーに対してtrueの値を入れてあげます。

後からこのrequireAuthがtureのルーティングに対して更に条件を足していきます。

const routes = [

  {

    path: "/",

    name: "home",

    component: HomeView,

    meta: { requiresAuth: true },

  },

  {

    path: "/login",

    name: "login",

    component: LoginView,

  },

];

beforeEachでルーティングに制限をかける

VueRouterの公式のドキュメンテーションにもありますが、このmetaに対して条件を足す場合には下記のようにコードを書いていくことになります。

パラメータではto とfromが使えますが今回はtoだけを使います。つまりは行き先だけを指定して、どこのページから来ているかのfromは使わないという事ですね。

to.meta.requiresAuthでさっきのrequireAuthがtrueであることと、 localStorage.getItemのtokenがnull、つまり、NoValueで値がない場合にどうするか指示します。

今回はバックエンドのアプリからログインのトークンをもらっていない場合はloginのページに誘導することにしています。

router.beforeEach((to) => {

  if (to.meta.requiresAuth && localStorage.getItem("token") == null) {

    return { name: "login" };

  }

});

では、今日はこれくらいで。