175 lines
5.6 KiB
TypeScript
175 lines
5.6 KiB
TypeScript
|
||
import { createRouter, createWebHistory } from 'vue-router'
|
||
import { useLocalStorage, useSessionStorage } from '@/utils/storage'
|
||
import { useCacheStore } from '@/stores/cache';
|
||
|
||
const routes = [
|
||
{
|
||
path: '/',
|
||
name: 'Layout',
|
||
component: () => import('@/views/Layout/index.vue'),
|
||
meta: {
|
||
title: '首页',
|
||
// 显式配置为 none，表示无动画
|
||
transition: 'none'
|
||
},
|
||
children: [
|
||
// 修改密码
|
||
{
|
||
path: '/user/change-password',
|
||
name: 'ChangePassword',
|
||
component: () => import('@/views/User/ChangePassword.vue'),
|
||
meta: {
|
||
title: '修改密码',
|
||
transition: 'fade'
|
||
}
|
||
},
|
||
// 首页
|
||
{
|
||
path: '',
|
||
name: 'Home',
|
||
component: () => import('@/components/main/Home/index.vue'),
|
||
meta: {
|
||
title: '首页',
|
||
transition: 'fade'
|
||
}
|
||
},
|
||
// 存款
|
||
{
|
||
path: '/fund/deposit',
|
||
name: 'Deposit',
|
||
component: () => import('@/components/main/Fund/Deposit.vue'),
|
||
meta: {
|
||
title: '存款',
|
||
transition: 'fade'
|
||
}
|
||
},
|
||
// 取款
|
||
{
|
||
path: '/fund/withdraw',
|
||
name: 'Withdraw',
|
||
component: () => import('@/components/main/Fund/Withdraw.vue'),
|
||
meta: {
|
||
title: '取款',
|
||
transition: 'fade'
|
||
}
|
||
},
|
||
// 转账
|
||
{
|
||
path: '/fund/transfer',
|
||
name: 'Transfer',
|
||
component: () => import('@/components/main/Fund/Transfer.vue'),
|
||
meta: {
|
||
title: '转账',
|
||
transition: 'fade'
|
||
}
|
||
},
|
||
// 资金明细
|
||
{
|
||
path: '/fund/detail',
|
||
name: 'Detail',
|
||
component: () => import('@/components/main/Fund/Detail.vue'),
|
||
meta: {
|
||
title: '资金明细',
|
||
transition: 'fade'
|
||
}
|
||
},
|
||
// 审核记录
|
||
{
|
||
path: '/fund/audit',
|
||
name: 'Audit',
|
||
component: () => import('@/components/main/Fund/Audit.vue'),
|
||
meta: {
|
||
title: '审核记录',
|
||
transition: 'fade'
|
||
}
|
||
},
|
||
//提现记录
|
||
{
|
||
path: '/fund/withdrawal',
|
||
name: 'Withdrawal',
|
||
component: () => import('@/components/main/Fund/Withdrawal.vue'),
|
||
meta: {
|
||
title: '提现记录',
|
||
transition: 'fade'
|
||
}
|
||
},
|
||
// 充值记录
|
||
{
|
||
path: '/fund/recharge',
|
||
name: 'Recharge',
|
||
component: () => import('@/components/main/Fund/Recharge.vue'),
|
||
meta: {
|
||
title: '充值记录',
|
||
transition: 'fade'
|
||
}
|
||
},
|
||
]
|
||
},
|
||
{
|
||
path: '/login',
|
||
name: 'Login',
|
||
component: () => import('@/views/User/Login.vue'),
|
||
meta: {
|
||
title: '登录',
|
||
transition: 'none'
|
||
}
|
||
},
|
||
{
|
||
path: '/reset-password',
|
||
name: 'ResetPassword',
|
||
component: () => import('@/views/User/ResetPassword.vue'),
|
||
meta: {
|
||
title: '重置密码',
|
||
transition: 'none'
|
||
}
|
||
},
|
||
]
|
||
|
||
const router = createRouter({
|
||
history: createWebHistory(),
|
||
routes
|
||
})
|
||
|
||
// 导航守卫
|
||
// 定义无需登录的白名单页面（登录、重置密码、404等）
|
||
const whiteList = ['/login', '/reset-password', '/404'];
|
||
|
||
router.beforeEach((to, from, next) => {
|
||
// 1. 设置页面标题（优化类型判断）
|
||
if (to.meta.title && typeof to.meta.title === 'string') {
|
||
document.title = to.meta.title;
|
||
}
|
||
|
||
// 2. 获取 token（使用封装的 useLocalStorage.get，添加空值保护）
|
||
const token = useLocalStorage.get<string>('token');
|
||
|
||
// 3. 修改密码缓存逻辑（提前执行，不影响 next 调用）
|
||
const cacheStore = useCacheStore()
|
||
// 进入修改密码页 → 缓存上一个业务页（仅在鉴权放行前记录）
|
||
if (to.name === 'ChangePassword' && from.name && from.name !== 'Login') {
|
||
cacheStore.addCache(String(from.name)) // 缓存原操作页
|
||
useSessionStorage.set('backPath', from.fullPath) // 记录原页面完整地址
|
||
}
|
||
|
||
// 4. 路由鉴权核心逻辑（唯一的 next 调用分支）
|
||
if (token?.value) { // 空值保护：token 存在且有值
|
||
// 已登录：如果访问白名单页面，重定向到首页
|
||
if (whiteList.includes(to.path)) {
|
||
next('/'); // 唯一调用：重定向首页
|
||
} else {
|
||
// 已登录且访问非白名单页面，正常放行
|
||
next(); // 唯一调用：正常放行
|
||
}
|
||
} else {
|
||
// 未登录：如果访问白名单页面，正常放行
|
||
if (whiteList.includes(to.path)) {
|
||
next(); // 唯一调用：正常放行
|
||
} else {
|
||
// 未登录且访问非白名单页面，重定向到登录页
|
||
next('/login'); // 唯一调用：重定向登录
|
||
}
|
||
}
|
||
});
|
||
|
||
export default router |