Lufaneng 11 months ago
parent 57054b4eb6
commit fb300c5f11

@ -3,22 +3,18 @@
<div class="scrollbar"> <div class="scrollbar">
<el-scrollbar> <el-scrollbar>
<el-menu <el-menu
:default-openeds="['/BusinessManage']"
:default-active="route.path" :default-active="route.path"
active-text-color="#1890FF" active-text-color="#1890FF"
background-color="#fff" background-color="#fff"
text-color="#000" text-color="#000"
router router
> >
<template v-for="(item, index) in routes[1].children" :key="index"> <template v-for="(item, index) in routes" :key="index">
<el-sub-menu <el-sub-menu
:index="'/' + item.path" :index="'/' + item.path"
v-if="item.children && item.children.filter((el) => !el.meta.hide).length > 0" v-if="item.children && item.children.filter((el) => !el.meta.hide).length > 0"
> >
<template #title> <template #title>
<el-icon v-if="item.meta.title === '门店管理'">
<Notebook />
</el-icon>
<span> {{ item.meta.title }}</span> <span> {{ item.meta.title }}</span>
</template> </template>
<el-menu-item <el-menu-item
@ -30,22 +26,6 @@
> >
</el-sub-menu> </el-sub-menu>
<el-menu-item :index="item.redirect || '/' + item.path" v-else-if="!item.meta.hide"> <el-menu-item :index="item.redirect || '/' + item.path" v-else-if="!item.meta.hide">
<el-icon v-if="item.meta.title === '门店管理'">
<Notebook />
</el-icon>
<el-icon v-if="item.meta.title === '工作台'">
<Calendar />
</el-icon>
<el-icon v-if="item.meta.title === '企业管理'">
<OfficeBuilding />
</el-icon>
<el-icon v-if="item.meta.title === 'C端管理'">
<User />
</el-icon>
<el-icon v-if="item.meta.title === '门店审核'">
<Tickets />
</el-icon>
<el-icon v-if="item.meta.title === '企业审核'"><Memo /></el-icon>
<span>{{ item.meta.title }}</span> <span>{{ item.meta.title }}</span>
</el-menu-item> </el-menu-item>
</template> </template>
@ -56,18 +36,12 @@
</template> </template>
<script setup> <script setup>
import { routes } from '@/router/index'
import { useUserStore } from '@/stores/user' import { useUserStore } from '@/stores/user'
const isAdmin = const userStore = useUserStore()
useUserStore().userInfo?.jurisdictions &&
useUserStore().userInfo?.jurisdictions?.findIndex((item) => item.code === 'superadmin') !== -1
console.log(useUserStore().userInfo)
console.log(isAdmin)
const route = useRoute() const route = useRoute()
console.log(routes)
const routes = userStore.routerList
</script> </script>
<style lang="scss" scoped> <style lang="scss" scoped>

@ -10,7 +10,7 @@
<div class="userInfo"> <div class="userInfo">
<div class="avatar"></div> <div class="avatar"></div>
<div class="username"> <div class="username">
{{ userStore.userInfo?.nickname || userStore.userInfo?.username }} {{ userStore.userInfo?.username }}
</div> </div>
</div> </div>
<template #dropdown> <template #dropdown>
@ -42,30 +42,31 @@
</el-container> </el-container>
</template> </template>
<script lang="ts" setup> <script lang="js" setup>
import Aside from './components/aside.vue' import Aside from './components/aside.vue'
import { routes } from '@/router/index' import { routes } from '@/router/index'
import { useRoute, useRouter } from 'vue-router' import { useRoute, useRouter } from 'vue-router'
import { useUserStore } from '@/stores/user' import { useUserStore } from '@/stores/user'
const userStore = useUserStore() const userStore = useUserStore()
// console.log(userStore.userInfo)
const breadcrumbList = ref([]) const breadcrumbList = ref([])
const route = useRoute() const route = useRoute()
const router = useRouter() const router = useRouter()
// const getBreadcrumbList = () => { const getBreadcrumbList = () => {
// const arr = [] const arr = []
// const obj = userStore[0].children.find((item) => item.path === route.path.split('/')[1]) const obj = userStore?.routerList.find((item) => item.path === route.path.split('/')[1])
// arr.push(obj) arr.push(obj)
// if (route.path.split('/').length > 2) { if (route.path.split('/').length > 2) {
// arr.push(obj.children.find((item) => item.path === route.path.split('/')[2])) arr.push(obj.children.find((item) => item.path === route.path.split('/')[2]))
// } }
// breadcrumbList.value = arr breadcrumbList.value = arr
// } }
// watch(route, () => { watch(route, () => {
// getBreadcrumbList() getBreadcrumbList()
// }) })
// getBreadcrumbList() getBreadcrumbList()
const logout = () => { const logout = () => {
userStore.logout() userStore.logout()

@ -14,39 +14,33 @@ export const constantRoutes = [
component: () => import('@/views/Login/index.vue'), component: () => import('@/views/Login/index.vue'),
meta: { title: '登录' }, meta: { title: '登录' },
}, },
{ ]
path: '/',
component: Layout, // 动态路由配置(需要权限)
redirect: `/SystemManage/UserManage`, // 重定向到第一个有权限的路由 export const asyncRoutes = [
children: [
// {
// path: 'WorkbenchPage',
// name: 'WorkbenchPage',
// component: () => import('@/views/WorkbenchPage/index.vue'),
// meta: { title: '工作台', permissions: ['workbench'] },
// },
{ {
path: 'SystemManage', path: 'SystemManage',
meta: { title: '系统管理' }, meta: { title: '系统管理', permissions: ['system'] },
redirect: `/SystemManage/UserManage`, redirect: `/SystemManage/UserManage`,
name: 'SystemManage',
children: [ children: [
{ {
path: 'UserManage', path: 'UserManage',
name: 'UserManage', name: 'UserManage',
component: () => import('@/views/UserManage/index.vue'), component: () => import('@/views/UserManage/index.vue'),
meta: { title: '用户管理', permissions: ['RoleManage'] }, meta: { title: '用户管理', permissions: ['user_management'] },
}, },
{ {
path: 'RoleManage', path: 'RoleManage',
name: 'RoleManage', name: 'RoleManage',
component: () => import('@/views/RoleManage/index.vue'), component: () => import('@/views/RoleManage/index.vue'),
meta: { title: '角色管理', permissions: ['RoleManage'] }, meta: { title: '角色管理', permissions: ['role_management'] },
}, },
{ {
path: 'AuthManage', path: 'AuthManage',
name: 'AuthManage', name: 'AuthManage',
component: () => import('@/views/AuthManage/index.vue'), component: () => import('@/views/AuthManage/index.vue'),
meta: { title: '权限管理', permissions: ['AuthManage'] }, meta: { title: '权限管理', permissions: ['permission_management'] },
}, },
], ],
}, },
@ -54,71 +48,21 @@ export const constantRoutes = [
path: 'ModelManage', path: 'ModelManage',
name: 'ModelManage', name: 'ModelManage',
component: () => import('@/views/ModelManage/index.vue'), component: () => import('@/views/ModelManage/index.vue'),
meta: { title: '模版管理' }, meta: { title: '模版管理', permissions: ['template'] },
} },
], {
path: 'NoPermission',
name: 'NoPermission',
component: () => import('@/views/NoPermission/index.vue'),
meta: { title: 'NoPermission', hide: true },
} }
] ]
// 动态路由配置(需要权限)
// export const asyncRoutes = [
// // {
// // path: 'WorkbenchPage',
// // name: 'WorkbenchPage',
// // component: () => import('@/views/WorkbenchPage/index.vue'),
// // meta: { title: '工作台', permissions: ['workbench'] },
// // },
// {
// path: 'BusinessManage',
// name: 'BusinessManage',
// meta: { title: '门店管理', permissions: ['business'] },
// component: () => import('@/views/BusinessManage/index.vue'),
// children: [
// // {
// // path: 'StoreManage',
// // name: 'StoreManage',
// // component: () => import('@/views/BusinessManage/index.vue'),
// // meta: { title: '门店列表', permissions: ['business:store'] },
// // },
// // {
// // path: 'DataManage',
// // name: 'DataManage',
// // component: () => import('@/views/BusinessManage/DataManage.vue'),
// // meta: { title: '分类管理', permissions: ['business:data'] },
// // },
// ],
// },
// {
// path: 'EnterpriseManage',
// name: 'EnterpriseManage',
// component: () => import('@/views/EnterpriseManage/index.vue'),
// meta: { title: '企业管理', permissions: ['enterprise'] },
// },
// {
// path: 'CustomerManage',
// name: 'CustomerManage',
// component: () => import('@/views/CustomerManage/index.vue'),
// meta: { title: 'C端管理', permissions: ['superadmin'] },
// },
// {
// path: 'StoreReview',
// name: 'StoreReview',
// component: () => import('@/views/StoreReview/index.vue'),
// meta: { title: '门店审核', permissions: ['superadmin'] },
// },
// {
// path: 'EnterpriseAudit',
// name: 'EnterpriseAudit',
// component: () => import('@/views/EnterpriseAudit/index.vue'),
// meta: { title: '企业审核', permissions: ['superadmin'] },
// },
// ]
// 检查用户权限 // 检查用户权限
function hasPermission(permissions, userPermissions) { function hasPermission(permissions, userPermissions) {
if (!permissions || permissions.length === 0) return true if (!permissions || permissions.length === 0) return true
if (useUserStore().userInfo?.isAdmin) return true
if (!userPermissions || userPermissions.length === 0) return false if (!userPermissions || userPermissions.length === 0) return false
return permissions.some(permission => return permissions.some(permission =>
userPermissions.some(userPerm => userPerm.code === permission) userPermissions.some(userPerm => userPerm.code === permission)
) )
@ -138,7 +82,13 @@ function filterAsyncRoutes(routes, userPermissions) {
filteredRoutes.push(temp) filteredRoutes.push(temp)
} }
}) })
if (filteredRoutes.length > 0) {
filteredRoutes.sort((a, b) => {
if (a.path === 'NoPermission') {
return 1
}
})
}
return filteredRoutes return filteredRoutes
} }
@ -147,14 +97,16 @@ export function generateRoutes(userPermissions) {
const accessedRoutes = filterAsyncRoutes(asyncRoutes, userPermissions) const accessedRoutes = filterAsyncRoutes(asyncRoutes, userPermissions)
// 如果有可访问的路由,创建主布局路由 // 如果有可访问的路由,创建主布局路由
// console.log('accessedRoutes', accessedRoutes)
if (accessedRoutes.length > 0) { if (accessedRoutes.length > 0) {
const mainRoute = { const mainRoute = {
path: '/', path: '/',
component: Layout, component: Layout,
redirect: `/${accessedRoutes[0].path}`, // 重定向到第一个有权限的路由 name: 'index',
redirect: accessedRoutes[0].redirect || `/${accessedRoutes[0].path}`, // 重定向到第一个有权限的路由
children: accessedRoutes, children: accessedRoutes,
} }
useUserStore().setRouterList(accessedRoutes || [])
return [mainRoute, ...constantRoutes] return [mainRoute, ...constantRoutes]
} }
@ -167,64 +119,75 @@ const router = createRouter({
history: createWebHistory(import.meta.env.BASE_URL), history: createWebHistory(import.meta.env.BASE_URL),
routes, routes,
}) })
console.log('routerinit')
// 白名单 // 白名单
const whiteList = ['/login'] const whiteList = ['/login']
// 标记是否已添加动态路由 // 标记是否已添加动态路由
let hasAddRoutes = false let hasAddRoutes = false
function flatten(arr) {
const res = []
arr.forEach(item => {
const { children, ...rest } = item
res.push(rest) // 当前节点
if (children && children.length > 0) {
res.push(...flatten(children)) // 递归子节点
}
})
return res
}
// 全局前置导航守卫 // 全局前置导航守卫
router.beforeEach(async (to, from, next) => { router.beforeEach(async (to, from, next) => {
// 开启进度条 // 开启进度条
NProgress.start() NProgress.start()
const userStore = useUserStore()
// 如果没有 token并且不在白名单中则重定向到登录 // 如果没有 token并且不在白名单中则重定向到登录
if (!userStore.token && !whiteList.includes(to.path)) { if (!useUserStore().token && !whiteList.includes(to.path)) {
return next('/login') return next('/login')
} }
// 如果有 token 但还没有添加动态路由 // 如果有 token 但还没有添加动态路由
// if (userStore.token && !hasAddRoutes) { if (useUserStore().token && !hasAddRoutes) {
// try { try {
// // 获取用户权限 // 获取用户权限
// const userPermissions = userStore.userInfo?.jurisdictions || [] const userPermissions = flatten(useUserStore().userInfo?.menus || [])
// // 生成有权限的路由
// const accessRoutes = generateRoutes(userPermissions) // 生成有权限的路由
const accessRoutes = generateRoutes(userPermissions)
// // 清除现有路由
// router.getRoutes().forEach(route => { // 清除现有路由
// if (route.name && route.name !== 'login') { router.getRoutes().forEach(route => {
// router.removeRoute(route.name) if (route.name && route.name !== 'login') {
// } router.removeRoute(route.name)
// }) }
})
// // 添加新的动态路由
// accessRoutes.forEach(route => { // 添加新的动态路由
// router.addRoute(route) accessRoutes.forEach(route => {
// }) router.addRoute(route)
})
// hasAddRoutes = true
hasAddRoutes = true
// // 如果当前访问的是根路径,重定向到第一个有权限的页面
// if (to.path === '/') { // 如果当前访问的是根路径,重定向到第一个有权限的页面
// const firstRoute = accessRoutes.find(route => route.path === '/') if (to.path === '/') {
// if (firstRoute && firstRoute.children && firstRoute.children.length > 0) { const firstRoute = accessRoutes.find(route => route.path === '/')
// return next(`/${firstRoute.children[0].path}`) if (firstRoute && firstRoute.children && firstRoute.children.length > 0) {
// } return next(`/${firstRoute.children[0].path}`)
// } }
}
// // 重新导航到目标路由
// return next({ ...to, replace: true }) // 重新导航到目标路由
// } catch (error) { return next({ ...to, replace: true })
// console.error('生成路由失败:', error) } catch (error) {
// // 清除用户信息并重定向到登录 console.error('生成路由失败:', error)
// userStore.logout() // 清除用户信息并重定向到登录
// return next('/login') useUserStore().logout()
// } return next('/login')
// } }
}
next() next()
}) })

@ -18,7 +18,7 @@ export const useUserStore = defineStore('user', () => {
localStorage.setItem('userInfo', JSON.stringify(u)) localStorage.setItem('userInfo', JSON.stringify(u))
} }
const setRouterList = (u) => { const setRouterList = (u) => {
userInfo.value = u routerList.value = u
localStorage.setItem('routerList', JSON.stringify(u)) localStorage.setItem('routerList', JSON.stringify(u))
} }
const logout = () => { const logout = () => {
@ -30,9 +30,9 @@ export const useUserStore = defineStore('user', () => {
routerList.value = [] routerList.value = []
// 重置路由 // 重置路由
// import('@/router').then(({ resetRouter }) => { import('@/router').then(({ resetRouter }) => {
// resetRouter() resetRouter()
// }) })
} }
return { token, setToken, setUserInfo, userInfo, logout } return { token, setToken, setUserInfo, userInfo, logout, setRouterList, routerList }
}) })

@ -0,0 +1,7 @@
<template>
<h1>暂无权限请联系管理员添加权限</h1>
</template>
<script setup></script>
<style lang="scss" scoped></style>
Loading…
Cancel
Save