Vue.jsでのロールベースのアクセスポリシーを作成するセキュリティガイド

npm install vue-router vuex

// roles.js
export const roles = {
  ADMIN: 'admin',
  EDITOR: 'editor',
  VIEWER: 'viewer'
};

// store.js
export default {
  state: {
    user: {
      name: 'John Doe',
      role: 'admin'
    }
  },
  getters: {
    userRole: state => state.user.role
  }
};

// router/index.js
import store from '@/store';

const router = new VueRouter({
  routes: [
    { path: '/admin', component: AdminPage, meta: { role: 'admin' } },
    { path: '/editor', component: EditorPage, meta: { role: 'editor' } }
  ]
});

router.beforeEach((to, from, next) => {
  const userRole = store.getters.userRole;
  if (to.meta.role && to.meta.role !== userRole) {
    next('/unauthorized');
  } else {
    next();
  }
});

<template>
  <div v-if="userRole === 'admin'">
    管理者用ダッシュボード
  </div>
</template>

<script>
import { mapGetters } from 'vuex';
export default {
  computed: {
    ...mapGetters(['userRole'])
  }
};
</script>

<template>
  <div>
    アクセス権がありません
  </div>
</template>

methods: {
  async fetchUser() {
    const response = await fetch('/api/user');
    const data = await response.json();
    this.$store.commit('setUser', data);
  }
}

Vue.directive('role', {
  bind(el, binding, vnode) {
    const userRole = store.getters.userRole;
    if (binding.value !== userRole) {
      el.style.display = 'none';
    }
  }
});

<template>
  <ul>
    <li v-if="userRole === 'admin'">管理者メニュー</li>
    <li v-if="userRole === 'editor'">編集者メニュー</li>
  </ul>
</template>

methods: {
  async login() {
    const response = await fetch('/api/login');
    const data = await response.json();
    localStorage.setItem('token', data.token);
    this.$store.commit('setUser', data.user);
  }
}

router.beforeEach((to, from, next) => {
  if (to.meta.requiresAuth && !store.state.user) {
    next('/login');
  } else {
    next();
  }
});