路由配置 + 权限示例
// config/routes.ts
export default [
{
path: '/dashboard',
component: '@/layouts/BasicLayout',
wrappers: ['@/wrappers/auth'],
routes: [
{ path: '/dashboard/analysis', component: 'dashboard/analysis' },
{ path: '/dashboard/monitor', component: 'dashboard/monitor', access: 'canAdmin' },
],
},
{ path: '/system/user', component: 'system/user', access: 'canManageUser' },
];
// src/access.ts - 权限定义
export default function(initialState) {
const { currentUser } = initialState;
return {
canAdmin: currentUser?.access === 'admin',
canManageUser: currentUser?.access === 'admin',
};
};
国际化配置
// src/locales/zh-CN.ts
export default {
menu: {
dashboard: '仪表盘',
system: '系统管理',
user: '用户管理',
},
button: {
submit: '提交',
cancel: '取消',
confirm: '确认',
},
};
路由与动态权限示例
// src/router/index.ts
import { createRouter, createWebHashHistory } from 'vue-router'
const asyncRoutes = [
{
path: '/system',
component: Layout,
meta: { roles: ['admin', 'editor'] },
children: [
{
path: 'user',
component: () => import('@/views/system/user.vue'),
meta: { roles: ['admin'] },
},
],
},
]
// 路由守卫
router.beforeEach(async (to, from, next) => {
const hasRoles = store.getters.roles?.includes(to.meta.roles)
if (!hasRoles) next('/401')
else next()
})
Pinia 状态管理
// src/store/user.ts
import { defineStore } from 'pinia'
export const useUserStore = defineStore('user', {
state: () => ({
token: null,
userInfo: null,
roles: [] as string[],
}),
actions: {
async login(userInfo) {
const res = await loginApi(userInfo)
this.token = res.token
this.userInfo = res.user
},
logout() {
this.token = null
this.userInfo = null
this.roles = []
},
},
})
主题定制示例
// src/theme/index.ts
import { type GlobalThemeOverrides } from 'naive-ui'
export const themeOverrides: GlobalThemeOverrides = {
common: {
primaryColor: '#6366f1',
primaryColorHover: #818cf8',
primaryColorPressed: #4f46e5',
borderRadius: '8px',
fontSize: '14px',
},
Button: {
borderRadius: '10px',
fontWeight: '600',
},
Card: {
borderRadius: '12px',
paddingMedium: '20px',
},
}
// App.vue 中应用
<template>
<NConfigProvider :theme-overrides="themeOverrides">
<NMessageProvider>
<router-view />
</NMessageProvider>
</NConfigProvider>
</template>
权限指令
// 自定义权限指令
app.directive(
'auth', {
mounted(el, binding) {
const userStore = useUserStore()
const { value } = binding
const hasPermission = userStore.roles.some(
role => value.includes(role))
if (!hasPermission) {
el.parentNode?.removeChild(el)
}
},
})
// 使用指令
<button v-auth="['admin']">删除用户
</button>
<Auth value="admin">
<AdminPanel />
</Auth>