diff --git a/src/components/common/ErrorTip.vue b/src/components/common/ErrorTip.vue index b39a85c..7d5656e 100644 --- a/src/components/common/ErrorTip.vue +++ b/src/components/common/ErrorTip.vue @@ -1,12 +1,9 @@ @@ -31,11 +28,9 @@ const { toRoot } = useAppRouter() > 回到首页 - - diff --git a/src/components/common/appLoading.vue b/src/components/common/appLoading.vue index c3709c3..88b04b7 100644 --- a/src/components/common/appLoading.vue +++ b/src/components/common/appLoading.vue @@ -1,7 +1,5 @@ diff --git a/src/hooks/index.ts b/src/hooks/index.ts index 3b6ab86..2d9528c 100644 --- a/src/hooks/index.ts +++ b/src/hooks/index.ts @@ -1,4 +1,3 @@ -export * from './useAppRouter' export * from './useBoolean' export * from './useLoading' export * from './useEcharts' diff --git a/src/hooks/useAppRouter.ts b/src/hooks/useAppRouter.ts deleted file mode 100644 index 1b4fea0..0000000 --- a/src/hooks/useAppRouter.ts +++ /dev/null @@ -1,58 +0,0 @@ -import type { RouteLocationRaw } from 'vue-router' -import { router as gobalRouter } from '@/router' - -/** - * @description: 全局路由方法,vue-router自带的useRouter,在根目录下不能用 - * @param {*} isSetup - * @return {*} - */ -export function useAppRouter(isSetup = true) { - const router = isSetup ? useRouter() : gobalRouter - const route = router.currentRoute - - /* 路由跳转方法 */ - async function routerPush(to: RouteLocationRaw) { - await router.push(to) - } - - /* 路由跳转方法 */ - async function routerReplace(to: RouteLocationRaw) { - await router.replace(to) - } - - /* 前进后退方法 */ - function routerGo(delta: number) { - router.go(delta) - } - - /* 跳转根页方法 */ - async function toRoot() { - await routerPush({ path: '/appRoot' }) - } - /* 跳转至登录页 */ - async function toLogin(redirectUrl?: string) { - const redirect = redirectUrl || route.value.fullPath - const targetUrl = { - name: 'login', - query: { redirect }, - } - await routerPush(targetUrl) - } - /* 跳转重定向方法 */ - async function toLoginRedirect() { - const { query } = route.value - if (query?.redirect) - await routerPush(query.redirect as string) - else - await toRoot() - } - - return { - routerPush, - routerReplace, - routerGo, - toRoot, - toLogin, - toLoginRedirect, - } -} diff --git a/src/hooks/useSystem.ts b/src/hooks/useSystem.ts index 1fa28c0..94afaa9 100644 --- a/src/hooks/useSystem.ts +++ b/src/hooks/useSystem.ts @@ -1,20 +1,6 @@ import { isArray, isString } from 'radash' import { useAuthStore } from '@/store' -interface AppInfo { - /** 项目名称 */ - name: string -} - -/** 项目信息 */ -export function useAppInfo(): AppInfo { - const { VITE_APP_NAME: name } = import.meta.env - - return { - name, - } -} - /** 权限判断 */ export function usePermission() { const authStore = useAuthStore() diff --git a/src/layouts/components/sider/Logo.vue b/src/layouts/components/sider/Logo.vue index 7e54d4e..fec12d3 100644 --- a/src/layouts/components/sider/Logo.vue +++ b/src/layouts/components/sider/Logo.vue @@ -1,16 +1,16 @@ import type { RouteLocationNormalized } from 'vue-router' import { useAppStore, useTabStore } from '@/store' -import { useAppRouter } from '@/hooks' import { renderIcon } from '@/utils' const tabStore = useTabStore() const appStore = useAppStore() -const { routerPush, toRoot } = useAppRouter() - +const router = useRouter() function handleTab(route: RouteLocationNormalized) { - routerPush(route.path) + router.push(route.path) } function handleClose(name: string) { tabStore.closeTab(name) @@ -107,7 +105,7 @@ function onClickoutside() { v-for="item in tabStore.inherentTab" :key="item.path" :name="item.name" - @click="toRoot" + @click="router.push('/')" > {{ item.title }} diff --git a/src/router/guard/permission.ts b/src/router/guard/permission.ts index 7a11922..9d1b167 100644 --- a/src/router/guard/permission.ts +++ b/src/router/guard/permission.ts @@ -8,7 +8,6 @@ export async function createPermissionGuard( next: NavigationGuardNext, ) { const routeStore = useRouteStore() - // 判断有无TOKEN,登录鉴权 const isLogin = Boolean(local.get('token')) if (!isLogin) { @@ -26,23 +25,27 @@ export async function createPermissionGuard( if (!routeStore.isInitAuthRoute) { await routeStore.initAuthRoute() // 动态路由加载完回到根路由 - if (to.name === '404' && to.redirectedFrom) { + if (to.name === '404') { // 等待权限路由加载好了,回到之前的路由,否则404 - const path = to.redirectedFrom?.fullPath - next({ path, replace: true, query: to.query, hash: to.hash }) + next({ + path: to.fullPath, + replace: true, + query: to.query, + hash: to.hash, + }) return false } } // 权限路由已经加载,仍然未找到,重定向到404 - // if (to.name === '404') { - // next({ name: '404', replace: true }); - // return false; - // } + if (to.name === '404') { + next({ name: '404', replace: true }) + return false + } // 判断当前页是否在login,则定位去首页 if (to.name === 'login') { - next({ path: '/appRoot' }) + next({ path: '/' }) return false } diff --git a/src/store/auth.ts b/src/store/auth.ts index d902d01..5563d30 100644 --- a/src/store/auth.ts +++ b/src/store/auth.ts @@ -1,7 +1,6 @@ import { useRouteStore } from './route' import { fetchLogin, fetchUserInfo } from '@/service' import { router } from '@/router' -import { useAppRouter } from '@/hooks' import { local } from '@/utils' const emptyInfo: Auth.UserInfo = { @@ -30,15 +29,20 @@ export const useAuthStore = defineStore('auth-store', { /* 登录退出,重置用户信息等 */ async resetAuthStore() { const route = unref(router.currentRoute) - const { toLogin } = useAppRouter(false) // 清除本地缓存 this.clearAuthStorage() // 清空路由、菜单等数据 const routeStore = useRouteStore() routeStore.resetRouteStore() this.$reset() - if (route.meta.requiresAuth) - await toLogin() + if (route.meta.requiresAuth) { + router.push({ + name: 'login', + query: { + redirect: route.fullPath, + }, + }) + } }, clearAuthStorage() { local.remove('token') @@ -72,8 +76,11 @@ export const useAuthStore = defineStore('auth-store', { // 登录写入信息成功 if (catchSuccess) { // 进行重定向跳转 - const { toLoginRedirect } = useAppRouter(false) - await toLoginRedirect() + const route = unref(router.currentRoute) + const query = route.query as { redirect: string } + router.push({ + path: query.redirect || '/', + }) // 触发用户提示 window.$notification?.success({ @@ -106,8 +113,5 @@ export const useAuthStore = defineStore('auth-store', { return catchSuccess }, - async toggleUserRole(role: Auth.RoleType) { - await this.login(role, '123456') - }, }, }) diff --git a/src/store/route.ts b/src/store/route.ts index 6c1ad17..8b75d66 100644 --- a/src/store/route.ts +++ b/src/store/route.ts @@ -123,16 +123,16 @@ export const useRouteStore = defineStore('route-store', { if (!userInfo || !userInfo.id) return - const { data: routes } = await fetchUserRoutes({ + const { data } = await fetchUserRoutes({ id: userInfo.id, }) - if (!routes) + if (!data) return // 根据用户返回的路由表来生成真实路由 - const appRoutes = createDynamicRoutes(routes) + const appRoutes = createDynamicRoutes(data) // 生成侧边菜单 - this.createMenus(routes) + this.createMenus(data) // 插入路由表 router.addRoute(appRoutes) }, diff --git a/src/store/tab.ts b/src/store/tab.ts index ebc21d8..a953d71 100644 --- a/src/store/tab.ts +++ b/src/store/tab.ts @@ -1,5 +1,5 @@ import type { RouteLocationNormalized } from 'vue-router' -import { useAppRouter } from '@/hooks' +import { router } from '@/router' interface TabState { inherentTab: { @@ -50,7 +50,6 @@ export const useTabStore = defineStore('tab-store', { this.tabs.push(route) }, async closeTab(name: string) { - const { routerPush, toRoot } = useAppRouter(false) const tabsLength = this.tabs.length // 如果动态标签大于一个,才会标签跳转 if (this.tabs.length > 1) { @@ -60,11 +59,11 @@ export const useTabStore = defineStore('tab-store', { // 如果是关闭的当前页面,路由跳转到原先标签的后一个标签 if (this.currentTab === name && !isLast) { // 跳转到后一个标签 - await routerPush(this.tabs[index + 1].path) + router.push(this.tabs[index + 1].path) } else if (this.currentTab === name && isLast) { // 已经是最后一个了,就跳转前一个 - await routerPush(this.tabs[index - 1].path) + router.push(this.tabs[index - 1].path) } } // 删除标签 @@ -73,7 +72,7 @@ export const useTabStore = defineStore('tab-store', { }) // 删除后如果清空了,就跳转到默认首页 if (tabsLength - 1 === 0) - await toRoot() + router.push('/') }, closeOtherTabs(name: string) { @@ -89,9 +88,8 @@ export const useTabStore = defineStore('tab-store', { this.tabs = this.tabs.filter((item, i) => i <= index) }, async closeAllTabs() { - const { toRoot } = useAppRouter(false) this.tabs.length = 0 - await toRoot() + router.push('/') }, hasExistTab(name: string) { diff --git a/src/views/permission/permission/index.vue b/src/views/permission/permission/index.vue index 908390f..a67ef6e 100644 --- a/src/views/permission/permission/index.vue +++ b/src/views/permission/permission/index.vue @@ -7,13 +7,17 @@ const { hasPermission } = usePermission() const { role } = authStore.userInfo const roleList: Auth.RoleType[] = ['super', 'admin', 'user'] + +function toggleUserRole(role: Auth.RoleType) { + authStore.login(role, '123456') +} 当前权限:{{ role }} - + {{ item }} diff --git a/src/views/test/test2/index.vue b/src/views/test/test2/index.vue index 96668ab..d2953e3 100644 --- a/src/views/test/test2/index.vue +++ b/src/views/test/test2/index.vue @@ -1,13 +1,11 @@ 这个页面包含了一个不在侧边菜单的详情页面 - + 跳转详情子页