Axios を使用して Vue プロジェクトのユーザー権限を管理および制御する方法

npm install axios

yarn add axios

// permission.js

import axios from 'axios'

const checkPermission = async (permission) => {
  try {
    const response = await axios.get('/api/check_permission', {
      params: {
        permission: permission
      }
    })
    const { hasPermission } = response.data
    return hasPermission
  } catch (error) {
    console.error(error)
    return false
  }
}

export {
  checkPermission
}

// HomePage.vue

<template>
  <div>
    <h1>Home Page</h1>
  </div>
</template>

<script>
import { checkPermission } from './permission'

export default {
  mounted() {
    this.checkPagePermission()
  },
  methods: {
    async checkPagePermission() {
      const hasPermission = await checkPermission('access_home_page')
      if (!hasPermission) {
        // 用户没有权限访问该页面，进行相应处理
      }
    }
  }
}
</script>

// router.js

import Vue from 'vue'
import Router from 'vue-router'
import { checkPermission } from './permission'

Vue.use(Router)

const router = new Router({
  routes: [
    {
      path: '/',
      name: 'home',
      component: Home,
      meta: {
        requiresPermission: true
      }
    },
    {
      path: '/about',
      name: 'about',
      component: About,
      meta: {
        requiresPermission: true
      }
    }
  ]
})

router.beforeEach(async (to, from, next) => {
  if (to.meta.requiresPermission) {
    const hasPermission = await checkPermission(to.name)
    if (!hasPermission) {
      // 用户没有权限访问该页面，进行相应处理
    } else {
      next()
    }
  } else {
    next()
  }
})

export default router