ui_template/src/router/index.ts

import { createRouter, createWebHistory, type Router, type RouteRecordRaw } from 'vue-router'

import HomeView from '../view/HomeView.vue'
import PostDetailView from '../view/PostDetailView.vue'
import OrdersView from '../view/OrdersView.vue'
import NotificationsView from '../view/NotificationsView.vue'
import ProfileView from '../view/ProfileView.vue'
import WalletView from '../view/WalletView.vue'
import EditProfileView from '../view/EditProfileView.vue'
import StaticPageView from '../view/StaticPageView.vue'
import LoginView from '../view/LoginView.vue'
import UserLayout from '../layout/UserLayout.vue'
import AdminLayout from "../layout/AdminLayout.vue"
import UserView from "../view/UserView.vue"
import SiteSettingsView from "../view/SiteSettingsView.vue"
import {
  HomeFilled,
  Menu,
  User,
  ShoppingCart,
  Bell,
  Setting,
} from '@element-plus/icons-vue'
import { useLoginUserStore } from "../store"
import { ElMessage } from "element-plus"

export const userRoutes: RouteRecordRaw[] = [
  {
    path: '/',
    name: 'commonLayout',
    component: UserLayout,
    children: [
      {
        path: '/',
        name: 'home',
        component: HomeView,
        meta: { title: '首页', icon: HomeFilled, tab: 'home' }
      },
      {
        path: '/orders',
        name: 'orders',
        component: OrdersView,
        meta: { title: '我的订单', icon: ShoppingCart, tab: 'orders' }
      },
      {
        path: '/notifications',
        name: 'notifications',
        component: NotificationsView,
        meta: { title: '我的信息', icon: Bell, tab: 'notifications' }
      },
      {
        path: '/profile',
        name: 'profile',
        component: ProfileView,
        meta: { title: '我的账户', icon: User, tab: 'profile' }
      },
      {
        path: '/post/:id',
        name: 'postDetail',
        component: PostDetailView,
        meta: { title: '帖子详情' }
      },
      {
        path: '/wallet',
        name: 'wallet',
        component: WalletView,
        meta: { title: '钱包' }
      },
      {
        path: '/edit-profile',
        name: 'editProfile',
        component: EditProfileView,
        meta: { title: '修改个人信息' }
      },
      {
        path: '/page/:type',
        name: 'staticPage',
        component: StaticPageView,
        meta: { title: '' }
      },
    ],
  },
]

export const adminRoutes: RouteRecordRaw[] = [
  {
    path: '/admin',
    name: 'adminLayout',
    component: AdminLayout,
    children: [
      {
        path: '/admin/users',
        name: 'users',
        component: UserView,
        meta: { title: '用户管理', icon: User, requiresAdmin: true }
      },
      {
        path: '/admin/other',
        name: 'other',
        component: AdminLayout,
        meta: { title: '其他', icon: Menu, requiresAdmin: true }
      },
      {
        path: '/admin/settings',
        name: 'settings',
        component: SiteSettingsView,
        meta: { title: '网站设置', icon: Setting, requiresAdmin: true }
      }
    ],
    meta: { requiresAdmin: true }
  }
]

const router: Router = createRouter({
  history: createWebHistory(),
  routes: [
    { path: '/login', name: 'login', component: LoginView },
    ...userRoutes,
    ...adminRoutes
  ],
})

router.beforeEach((to, _from, next) => {
  if (to.matched.some(record => record.meta.requiresAdmin)) {
    const loginUserStore = useLoginUserStore()
    if (!loginUserStore.loginUser.isLogin) {
      ElMessage.warning('请先登录')
      next({ path: '/login', query: { redirect: to.fullPath } })
    } else if (loginUserStore.loginUser.user?.role !== 'admin') {
      ElMessage.error('无权访问')
      next('/')
    } else {
      next()
    }
  } else {
    next()
  }
})

export default router