// router/index.js
import { createRouter, createWebHistory } from 'vue-router';
import store from '@/store';

// 引入多個(gè)組件頁(yè)面 
import Home from '@/views/Home.vue';
import Admin from '@/views/Admin.vue';
import AddSomeFun from '@/views/AddSomeFun.vue';
import Login from '@/views/Login.vue';

// 定義路由，并且在 meta 中定義可訪問(wèn)的角色
const routes = [
  { path: '/', component: Home },
  { path: '/admin', component: Admin, meta: { roles: ['admin'] } },
  { path: '/addSomeFun', component: AddSomeFun, meta: { roles: ['user'] } },
  { path: '/login', component: Login }
];

// 創(chuàng)建路由
const router = createRouter({
  history: createWebHistory(),
  routes
});

// 路由校驗(yàn)
router.beforeEach((to, from, next) => {
  const userRole = store.state.userRole; // 假設(shè) Vuex 中存儲(chǔ)了用戶(hù) user、管理員 admin 角色
  if (to.meta.roles && !to.meta.roles.includes(userRole)) {
    next('/'); // 無(wú)權(quán)限跳轉(zhuǎn)到首頁(yè)
  } else {
    next();
  }
});

export default router;

// directives/permission.js
// 指令封裝
import { useStore } from 'vuex';

export default {
  install(app) {
    app.directive('permission', {
      mounted(el, binding) {
        const store = useStore();
        const userRole = store.state.userRole;
        if (!binding.value.includes(userRole)) {
          el.parentNode?.removeChild(el);
        }
      }
    });
  }
};

// main.js
import { createApp } from 'vue';
import App from './App.vue';
import store from './store';
import permissionDirective from './directives/permission';

const app = createApp(App);
app.use(store);
app.use(permissionDirective); // 注冊(cè)自定義指令
app.mount('#app');

<!-- 使用示例 -->
<button v-permission="['admin']">僅管理員可見(jiàn)</button>

// store/index.js
import { createStore } from 'vuex';

export default createStore({
  state: {
    userRole: 'user' // 假設(shè)存儲(chǔ)用戶(hù)角色
  },
  mutations: {
    setUserRole(state, role) {
      state.userRole = role;
    }
  }
});

<!-- 在組件中使用 Vuex 進(jìn)行權(quán)限判斷 -->
<template>
  <button v-if="userRole === 'admin'">僅管理員可見(jiàn)</button>
</template>

<script>
import { computed } from 'vue';
import { useStore } from 'vuex';

export default {
  setup() {
    const store = useStore();
    const userRole = computed(() => store.state.userRole);
    return { userRole };
  }
};
</script>

// 登錄后獲取用戶(hù)權(quán)限，并動(dòng)態(tài)添加路由
import router from '@/router';
import store from '@/store';
import axios from 'axios';

async function fetchUserRoutes() {
  const res = await axios.post('/common/getUserRoutes'); // 假設(shè)后端返回路由信息
  const routes = res.data
  
  routes.forEach(route => {
    router.addRoute(route);
  });
}

fetchUserRoutes();