vue-routerでMiddleware機能を実装

vue-routerには簡易的なdispatch機能があるが、細かい認証周りの機能は無いので自前で実装する必要がある。 業務で実装したのでその時のメモを書いておく。


vue-routerのドキュメントを読んでいると、 ナビゲーションガードという項目がある。

これによると、 beforeEachafterEach などの関数が定義されている。これらはルーティング前後の処理に挟むことができ、実際にどこに飛ばすかや前処理をすることができる。

const router = new VueRouter({ routes });
router.beforeEach((to, from, next) => {
  // ...
})

また、vue-routerのroutesにはmeta情報をもたせることができる。 ルートメタフィールド

meta: { auth: true|false } で認証が必要なページかどうかを表現をした。

const routes = [
  {
    path: "/",
    component: Top,
    meta: { auth: true }
  },
];

vuexで認証周りを管理するようにした。すごくちゃんと処理をしたわけではないが、とりあえず、 localStorage にtokenがあれば認証済みだという処理にした。

const isAuth = storage.jwtToken.get() ? true : false;

const state = {
  isAuth: isAuth
};

const getters = {
  isAuth: state => state.isAuth
};

最後に↑で書いた beforeEach でルーティングする。認証が通った状態ならそのまま、そうでなければ /login に飛ばす処理が書かれている。

const beforeEach = async (to, _, next) => {
  if (to.meta.auth) {
    store.getters["auth/isAuth"] ? next() : next({ path: "/login" });
    return;
  }
  next();
};

本当ならもうちょっとちゃんと書きたいのだが、まぁ一旦こんなもんでいいでしょう。