【Vue.js】認証付きルーティングを実装する方法｜ログイン状態の判定と制御

Vue.jsでアプリケーションを構築する際、ユーザーのログイン状態に応じてページアクセスを制御する「認証付きルーティング」は欠かせません。Vue Routerを活用すれば、ルート定義にメタ情報を追加し、ナビゲーションガードを使って柔軟にアクセス制御を実装できます。本記事では、認証状態に応じてルートを制御する具体的な方法を紹介します。

基本構成の概要
ルーティング定義の例
ナビゲーションガードでログインチェック
ログイン処理の例
ログアウト処理
認証状態をstoreで一元管理するには
まとめ

基本構成の概要

今回の実装では以下のような構成になります：

ログイン状態を管理する（例：localStorageやstore）
各ルートに meta: { requiresAuth: true } を付ける
beforeEach でルート移動前に認証をチェックする

ルーティング定義の例


// router/index.js
import { createRouter, createWebHistory } from 'vue-router'
import Home from '../views/Home.vue'
import Dashboard from '../views/Dashboard.vue'
import Login from '../views/Login.vue'

const routes = [
  {
    path: '/',
    name: 'Home',
    component: Home
  },
  {
    path: '/login',
    name: 'Login',
    component: Login
  },
  {
    path: '/dashboard',
    name: 'Dashboard',
    component: Dashboard,
    meta: { requiresAuth: true }
  }
]

const router = createRouter({
  history: createWebHistory(),
  routes
})

ナビゲーションガードでログインチェック


// 仮の認証判定（実際はstoreやtokenで判断）
function isLoggedIn() {
  return !!localStorage.getItem('auth_token')
}

router.beforeEach((to, from, next) => {
  if (to.meta.requiresAuth && !isLoggedIn()) {
    next({ name: 'Login' })
  } else {
    next()
  }
})

export default router

ログイン処理の例


// views/Login.vue
<script setup>
import { useRouter } from 'vue-router'

const router = useRouter()

function login() {
  // 実際はAPI認証処理などを行う
  localStorage.setItem('auth_token', 'dummy_token')
  router.push({ name: 'Dashboard' })
}
</script>

<template>
  <div>
    <h2>ログインページ</h2>
    <button @click="login">ログインする</button>
  </div>
</template>

ログアウト処理


function logout() {
  localStorage.removeItem('auth_token')
  router.push({ name: 'Home' })
}

認証状態をstoreで一元管理するには

より複雑なアプリでは、PiniaやVuexを使ってグローバルに認証状態を管理する方が望ましいです。


// store/auth.js（Pinia例）
import { defineStore } from 'pinia'

export const useAuthStore = defineStore('auth', {
  state: () => ({
    token: localStorage.getItem('auth_token') || null
  }),
  actions: {
    login(token) {
      this.token = token
      localStorage.setItem('auth_token', token)
    },
    logout() {
      this.token = null
      localStorage.removeItem('auth_token')
    },
    isLoggedIn() {
      return !!this.token
    }
  }
})