Skip to content

N
nse-ui
Commit 098367ae by wanglizhen
Options

菜单配置上传

parent a76586a0
正在显示 包含 188 行增加 和 349 行删除
src/layout/components/Navbar.vue
......@@ -88,9 +88,6 @@ function logout() {
}).then(() => {
userStore.logOut().then(() => {
// location.href = '/index'
appStore.signOut('logout')
appStore.setNavStatus({type: 'manage'})
appStore.setQueryData({
......
src/layout/components/Sidebar/index.vue
<template>
<div :class="{ 'has-logo': showLogo }" class="sidebar-container">
<logo v-if="showLogo" :collapse="isCollapse" />
{{ navType }}
<el-scrollbar wrap-class="scrollbar-wrapper">
<el-menu
:default-active="activeMenu"
:collapse="isCollapse"
:background-color="getMenuBackground"
:text-color="getMenuTextColor"
:unique-opened="true"
:active-text-color="theme"
:collapse-transition="false"
mode="vertical"
:class="sideTheme"
>
<sidebar-item
v-for="(route, index) in processedRouters"
:key="route.id || route.path + index"
:item="route"
:base-path="route.path"
/>
<el-menu :default-active="activeMenu" :collapse="isCollapse" :background-color="getMenuBackground"
:text-color="getMenuTextColor" :unique-opened="true" :active-text-color="theme" :collapse-transition="false"
mode="vertical" :class="sideTheme">
<sidebar-item v-for="(route, index) in menuShowData" :key="route.id || route.path + index" :item="route"
:base-path="route.path" />
<!-- <div v-for="(route, index) in processedRouters">{{ route.path }}</div> -->
</el-menu>
</el-scrollbar>
......@@ -38,12 +27,38 @@ const route = useRoute()
const appStore = useAppStore()
const settingsStore = useSettingsStore()
const permissionStore = usePermissionStore()
console.log('appStore.navList',appStore.navList)
// 转换接口数据为组件需要的格式
const processedRouters = computed(() => {
return permissionStore.sidebarRouters
})
// 菜单类型获取
const navType = computed(() => {
const navStatus = appStore.navStatus
const type = navStatus.type === 'project' ? '2' : '1'
return type
})
// 菜单显示数据
const menuShowData = computed(() => {
const list = processedRouters.value.filter(item => {
if (navType.value === '1') {
if (navType.value === item.type || !item.type) {
return true
} else {
return false
}
} else {
if (navType.value === item.type) {
return true
} else {
return false
}
}
})
return list
})
const showLogo = computed(() => settingsStore.sidebarLogo)
const sideTheme = computed(() => settingsStore.sideTheme)
const theme = computed(() => settingsStore.theme)
......
src/permission.js
import router from './router'
import { ElMessage } from 'element-plus'
import NProgress, { settings } from 'nprogress'
import NProgress from 'nprogress'
import 'nprogress/nprogress.css'
import { getToken } from '@/utils/auth'
import { isHttp, isPathMatch } from '@/utils/validate'
......@@ -11,73 +11,70 @@ import usePermissionStore from '@/store/modules/permission'
NProgress.configure({ showSpinner: false })
const whiteList = ['/login', '/register', '/assetLibrary', '/projectHome', '/projectManage', '/classification', '/desensitizationStrategy', '/Algorithm', '/Discover', '/CalculationMethod', '/Encryption', '/Dictionary']
const whiteList = ['/login', '/register', '/assetLibrary']
const isWhiteList = (path) => {
return whiteList.some(pattern => isPathMatch(pattern, path))
return whiteList.some((pattern) => isPathMatch(pattern, path))
}
router.beforeEach(async (to, from, next) => {
NProgress.start()
// 获取permissionStore实例
const permissionStore = usePermissionStore()
let isGeneratingRoutes = false
if (sessionStorage.getItem('__token') || isWhiteList(to.path)) {
console.log('next1')
try {
// 检查是否已经有路由数据，避免重复设置
if (!permissionStore.sidebarRouters || permissionStore.sidebarRouters.length === 0) {
console.log('next2')
// 从sessionStorage获取数据
const allnavListStr = sessionStorage.getItem('allnavList')
const navStatusStr = sessionStorage.getItem('navStatus')
if (allnavListStr && navStatusStr) {
console.log('next3')
try {
const allnavList = JSON.parse(allnavListStr)
const navStatus = JSON.parse(navStatusStr)
console.log('allnavList' , allnavList)
console.log('navStatus' , navStatus)
// 根据navStatus.type过滤菜单
let filterMenus = []
if (navStatus && navStatus.type) {
let type = navStatus.type === 'manage' ? '1' : '2'
filterMenus = allnavList.filter(item => item.type === type)
console.log('filterMenus' , filterMenus)
router.beforeEach((to, from, next) => {
NProgress.start()
if (getToken()) {
to.meta.title && useSettingsStore().setTitle(to.meta.title)
/* has token*/
if (to.path === '/login') {
next({ path: '/' })
NProgress.done()
} else if (isWhiteList(to.path)) {
next()
} else {
// 默认处理，如果没有type则使用全部菜单
filterMenus = allnavList
// 防止重复生成路由
if (isGeneratingRoutes) {
next()
return
}
isGeneratingRoutes = true
// 存入permissionStore
if (filterMenus && filterMenus.length > 0) {
permissionStore.setSidebarRouters(filterMenus)
usePermissionStore()
.generateRoutes()
.then((accessRoutes) => {
console.log('accessRoutes', accessRoutes)
// 根据roles权限生成可访问的路由表
accessRoutes.forEach((route) => {
if (!isHttp(route.path)) {
router.addRoute(route) // 动态添加可访问路由表
}
})
next({ ...to, replace: true }) // hack方法 确保addRoutes已完成
})
// if (useUserStore().roles.length === 0) {
// isRelogin.show = true
// // 判断当前用户是否已拉取完user_info信息
// useUserStore().getInfo().then(() => {
// isRelogin.show = false
} catch (parseError) {
console.error('解析sessionStorage数据失败:', parseError)
// 解析失败时清除无效数据
sessionStorage.removeItem('allnavList')
sessionStorage.removeItem('navStatus')
// }).catch(err => {
// useUserStore().logOut().then(() => {
// ElMessage.error(err)
// next({ path: '/' })
// })
// })
// } else {
// next()
// }
}
}
}
console.log(permissionStore.sidebarRouters)
console.log('next6',router.getRoutes())
next()
} catch (error) {
console.error('路由守卫处理失败:', error)
} else {
// 没有token
if (isWhiteList(to.path)) {
// 在免登录白名单，直接进入
next()
}
} else {
next(`/login?redirect=${to.fullPath}`)
next(`/login?redirect=${to.fullPath}`) // 否则全部重定向到登录页
NProgress.done()
}
}
})
router.afterEach(() => {
......
src/router/index.js
......@@ -58,84 +58,6 @@ export const constantRoutes = [
hidden: true
},
{
// 资产库
path: '/assetLibrary',
component: () => import('@/views/assetLibrary/index'),
hidden: true
},
{
// 脱敏算法
path: '/Algorithm',
component: () => import('@/views/ruleConfig/Algorithm/index'),
hidden: true
},
{
// 发现规则
path: '/Discover',
component: () => import('@/views/ruleConfig/Discover/index'),
hidden: true
},
{
// 加密规则
path: '/Encryption',
component: () => import('@/views/ruleConfig/Encryption/index'),
hidden: true
},
{
// 加密算法
path: '/CalculationMethod',
component: () => import('@/views/ruleConfig/CalculationMethod/index'),
hidden: true
},
{
// 知识库
path: '/Dictionary',
component: () => import('@/views/ruleConfig/Dictionary/index'),
hidden: true
},
{
// 客户端密管
path: '/classification/DensetuArea',
component: () => import('@/views/classification/DensetuArea/index'),
hidden: true
},
{
// 客户端监控管理
path: '/classification/MonitorManagement',
component: () => import('@/views/classification/MonitorManagement/index'),
hidden: true
},
// {
// // 项目管理
// path: '/projectManage',
// component: () => import('@/views/projectManage/index'),
// hidden: true
// },
// {
// // 项目首页
// path: '/projectHome',
// component: () => import('@/views/projectHome/index'),
// hidden: true
// },
// {
// // 加密设置
// path: '/classification',
// component: () => import('@/views/Classification/index'),
// hidden: true
// },
// {
// // 加密管理
// path: '/encryptionManagement',
// component: () => import('@/views/EncryptionManagement/index'),
// hidden: true
// },
// {
// // 脱敏策略管理
// path: '/desensitizationStrategy',
// component: () => import('@/views/desensitizationStrategy/index'),
// hidden: true
// },
{
path: '',
component: Layout,
redirect: '/index',
......@@ -161,7 +83,19 @@ export const constantRoutes = [
meta: { title: '个人中心', icon: 'user' }
}
]
}
},
{
// 客户端密管
path: '/classification/DensetuArea',
component: () => import('@/views/classification/DensetuArea/index'),
hidden: true
},
{
// 客户端监控管理
path: '/classification/MonitorManagement',
component: () => import('@/views/classification/MonitorManagement/index'),
hidden: true
},
]
// 动态路由，基于用户权限动态去加载
......
src/store/modules/permission.js
......@@ -8,16 +8,13 @@ import InnerLink from '@/layout/components/InnerLink'
// 匹配views里面所有的.vue文件
const modules = import.meta.glob('./../../views/**/*.vue')
const usePermissionStore = defineStore(
'permission',
{
const usePermissionStore = defineStore('permission', {
state: () => ({
routes: [],
addRoutes: [],
defaultRoutes: [],
topbarRouters: [],
sidebarRouters: [],
allsidebarRouters: []
}),
actions: {
setRoutes(routes) {
......@@ -31,74 +28,55 @@ const usePermissionStore = defineStore(
this.topbarRouters = routes
},
setSidebarRouters(routes) {
console.log('this.sidebarRoutersold',routes)
let list = filterAsyncRouter(routes)
list.forEach(item => {
router.addRoute(item)
});
this.sidebarRouters = list
console.log('this.sidebarRouters',this.sidebarRouters)
},
allsidebarRouters(routes){
this.sidebarRoutersall = routes
console.log(routes)
this.sidebarRouters = routes
console.log('sidebarRouters', this.sidebarRouters)
},
generateRoutes(roles) {
return new Promise(resolve => {
return new Promise((resolve) => {
// 向后端请求路由数据
getRouters().then(res => {
const sdata = JSON.parse(JSON.stringify(res.data))
const rdata = JSON.parse(JSON.stringify(res.data))
const defaultData = JSON.parse(JSON.stringify(res.data))
const navList = JSON.parse(sessionStorage.getItem('navList'))
// const navStatus = JSON.parse(sessionStorage.getItem('navStatus'))
// const type = navStatus.type === 'project' ? '2' : '1'
// const data = transformRoutes(navList).filter(item=>item.type === type)
const data = transformRoutes(navList)
console.log('data', data)
const sdata = JSON.parse(JSON.stringify(data))
const rdata = JSON.parse(JSON.stringify(data))
const defaultData = JSON.parse(JSON.stringify(data))
const sidebarRoutes = filterAsyncRouter(sdata)
const rewriteRoutes = filterAsyncRouter(rdata, false, true)
const defaultRoutes = filterAsyncRouter(defaultData)
const asyncRoutes = filterDynamicRoutes(dynamicRoutes)
asyncRoutes.forEach(route => { router.addRoute(route) })
asyncRoutes.forEach((route) => {
router.addRoute(route)
})
this.setRoutes(rewriteRoutes)
this.setSidebarRouters(constantRoutes.concat(sidebarRoutes))
this.setDefaultRoutes(sidebarRoutes)
this.setTopbarRoutes(defaultRoutes)
console.log('rewriteRoutes',rewriteRoutes)
resolve(rewriteRoutes)
})
})
},
}
})
},
})
// 遍历后台传来的路由字符串，转换为组件对象
function filterAsyncRouter(asyncRouterMap, lastRouter = false, type = false) {
return asyncRouterMap.filter(route => {
return asyncRouterMap.filter((route) => {
if (type && route.children) {
route.children = filterChildren(route.children)
}
if (route.component) {
// Layout ParentView 组件特殊处理
if (route.component === 'Layout') {
console.log(1111)
route.component = Layout
} else if (route.component === 'ParentView') {
console.log(2222)
route.component = ParentView
} else if (route.component === 'InnerLink') {
console.log(3333)
route.component = InnerLink
} else {
console.log(4444)
// console.log('route.component111',route.component)
// if(route.component === '/project/Project/index'){
route.component = loadView(route.component)
// }
// console.log('route.component',route.component)
}
}
if (route.children != null && route.children && route.children.length) {
......@@ -113,7 +91,7 @@ function filterAsyncRouter(asyncRouterMap, lastRouter = false, type = false) {
function filterChildren(childrenMap, lastRouter = false) {
var children = []
childrenMap.forEach(el => {
childrenMap.forEach((el) => {
el.path = lastRouter ? lastRouter.path + '/' + el.path : el.path
if (el.children && el.children.length && el.component === 'ParentView') {
children = children.concat(filterChildren(el.children, el))
......@@ -127,7 +105,7 @@ function filterChildren(childrenMap, lastRouter = false) {
// 动态路由遍历，验证是否具备权限
export function filterDynamicRoutes(routes) {
const res = []
routes.forEach(route => {
routes.forEach((route) => {
if (route.permissions) {
if (auth.hasPermiOr(route.permissions)) {
res.push(route)
......@@ -142,12 +120,9 @@ export function filterDynamicRoutes(routes) {
}
export const loadView = (view) => {
// console.log('view',view)
// console.log('modules',modules)
let res
for (const path in modules) {
const dir = path.split('views/')[1].split('.vue')[0]
// console.log('dir',dir)
if (dir === view) {
res = () => modules[path]()
}
......@@ -155,4 +130,61 @@ export const loadView = (view) => {
return res
}
// 格式化路由数据结构
function transformRoutes(originalRoutes) {
return originalRoutes.map((routeItem) => {
const hasChildren = routeItem.submenu && routeItem.submenu.length > 0
// 基础转换 - 所有路由都使用Layout作为父组件
const transformedRoute = {
path: routeItem.url,
name: routeItem.menuname.replace(/\s+/g, '') + new Date().getTime(),
hidden: false,
type: routeItem.type,
component: 'Layout', // 所有路由都使用Layout
redirect: 'noRedirect',
meta: {
title: routeItem.menuname,
icon: routeItem.icon,
noCache: false,
link: null,
singleLevel: !hasChildren,
},
children: [], // 初始化children数组
}
// 处理有子路由的情况
if (hasChildren) {
transformedRoute.alwaysShow = true
transformedRoute.children = routeItem.submenu.map((child) => ({
path: child.url.startsWith('/') ? child.url.substring(1) : child.url,
name: child.menuname.replace(/\s+/g, ''),
hidden: false,
component: `${routeItem.url.replace(/^\//, '')}/${child.url}/index`,
meta: {
title: child.menuname,
icon: child.icon,
noCache: false,
link: null,
},
}))
}
// 处理没有子路由的情况 - 将自己作为唯一的子路由
else {
transformedRoute.children.push({
path: '',
name: `${routeItem.menuname.replace(/\s+/g, '')}`,
hidden: false,
component: `${routeItem.url.replace(/^\//, '')}/index`,
meta: {
title: routeItem.menuname,
icon: routeItem.icon,
noCache: false,
link: null,
},
})
}
return transformedRoute
})
}
export default usePermissionStore
src/utils/switchRoute.js
......@@ -17,6 +17,4 @@ export function changeRoute() {
console.log('filterMenus',filterMenus)
appStore.setallNav(menus)
appStore.setNavStatus({type: type})
permissionStore.setSidebarRouters(filterMenus)
}
\ No newline at end of file
src/views/login.vue
......@@ -3,25 +3,13 @@
<el-form ref="loginRef" :model="loginForm" :rules="loginRules" class="login-form">
<h3 class="title">{{ title }}</h3>
<el-form-item prop="username">
<el-input
v-model="loginForm.username"
type="text"
size="large"
auto-complete="off"
placeholder="账号"
>
<el-input v-model="loginForm.username" type="text" size="large" auto-complete="off" placeholder="账号">
<template #prefix><svg-icon icon-class="user" class="el-input__icon input-icon" /></template>
</el-input>
</el-form-item>
<el-form-item prop="password">
<el-input
v-model="loginForm.password"
type="password"
size="large"
auto-complete="off"
placeholder="密码"
@keyup.enter="handleLogin"
>
<el-input v-model="loginForm.password" type="password" size="large" auto-complete="off" placeholder="密码"
@keyup.enter="handleLogin">
<template #prefix><svg-icon icon-class="password" class="el-input__icon input-icon" /></template>
</el-input>
</el-form-item>
......@@ -42,13 +30,7 @@
</el-form-item> -->
<!-- <el-checkbox v-model="loginForm.rememberMe" style="margin:0px 0px 25px 0px;">记住密码</el-checkbox> -->
<el-form-item style="width:100%;">
<el-button
:loading="loading"
size="large"
type="primary"
style="width:100%;"
@click.prevent="handleLogin"
>
<el-button :loading="loading" size="large" type="primary" style="width:100%;" @click.prevent="handleLogin">
<span v-if="!loading">登 录</span>
<span v-else>登 录 中...</span>
</el-button>
......@@ -116,45 +98,23 @@ function handleLogin() {
if (valid) {
loading.value = true
userStore.login(loginForm.value).then(async (res) => {
console.log('res123',res)
userStore.login(loginForm.value).then( (res) => {
console.log('res123', res)
let data = res
let menus = transformRoutes(data.menus)
const { menus } = data
// return
// 用户数据整理
let user = data.tsysUser
let loginBlankMenus = false
if(data.menus.length === 0) {
if (menus.length === 0) {
loginBlankMenus = true
}
try {
await appStore.signOut('login')
// console.log('menus',menus)
// return
let filterMenus = appStore.navStatus.type === 'manage' ? menus.filter(item => item.type === '1') : menus.filter(item => item.type === '2')
appStore.setNav(filterMenus)
// appStore.signOut('login')
appStore.setNav(menus)
appStore.setallNav(menus)
console.log('appStore.nav',appStore.allnavList)
// console.log('menus',filterMenus)
appStore.setNavStatus({type: appStore.navStatus.type || 'manage'})
// permissionStore.allsidebarRouters(menus)
permissionStore.setSidebarRouters(filterMenus)
// console.log('filterMenus',filterMenus)
// 设置导航菜单
// return
// 设置用户信息
appStore.setUserInfo({user, licenseRst: data.licenseRst, loginBlankMenus})
appStore.setNavStatus({ type: appStore.navStatus.type || 'manage' })
appStore.setUserInfo({ user, licenseRst: data.licenseRst, loginBlankMenus })
// 存储token和登录信息
window.sessionStorage.setItem('__token', data.token)
......@@ -163,36 +123,7 @@ function handleLogin() {
password: encryptPassword(loginForm.value.password)
})
window.sessionStorage.setItem('login', loginStr)
const query = route.query
const otherQueryParams = Object.keys(query).reduce((acc, cur) => {
if (cur !== "redirect") {
acc[cur] = query[cur]
}
return acc
}, {})
// console.log('generateRoute', getRout)
// router.push({ path:"/index", query: otherQueryParams })
router.push({ path: redirect.value || "/index", query: otherQueryParams })
// if(redirect.value){
// console.log('redirect',redirect.value)
// router.push({ path: redirect.value, query: otherQueryParams })
// router.push({ path: redirect.value, query: otherQueryParams })
// console.log(2134)
// }else{
// router.push({ path: "/", query: otherQueryParams })
// }
// console.log('redirect',redirect.value)
// 跳转页面或其他操作
// router.push('/dashboard')
} catch (error) {
console.error('登录处理失败:', error)
}
router.push({ path: '/index'})
}).catch(() => {
loading.value = false
// 重新获取验证码
......@@ -203,70 +134,6 @@ function handleLogin() {
}
})
}
function transformRoutes(originalRoutes) {
return originalRoutes.map(route => {
const hasChildren = route.submenu && route.submenu.length > 0
// 基础转换 - 所有路由都使用Layout作为父组件
const transformedRoute = {
path: route.url,
name: route.menuname.replace(/\s+/g, '')+ new Date().getTime(),
hidden: false,
type: route.type,
component: 'Layout', // 所有路由都使用Layout
redirect: 'noRedirect',
meta: {
title: route.menuname,
icon: route.icon,
noCache: false,
link: null,
singleLevel: !hasChildren
},
children: [] // 初始化children数组
};
// 处理有子路由的情况
if (hasChildren) {
transformedRoute.alwaysShow = true
transformedRoute.children = route.submenu.map(child => ({
path: child.url.startsWith('/') ? child.url.substring(1) : child.url,
name: child.menuname.replace(/\s+/g, ''),
hidden: false,
component:`${route.url.replace(/^\//, '')}/${child.url}/index`,
meta: {
title: child.menuname,
icon: child.icon,
noCache: false,
link: null
}
}));
}
// 处理没有子路由的情况 - 将自己作为唯一的子路由
else {
transformedRoute.children.push({
path: '',
name: `${route.menuname.replace(/\s+/g, '')}`,
hidden: false,
component: `${route.url.replace(/^\//, '')}/index`,
meta: {
title: route.menuname,
icon: route.icon,
noCache: false,
link: null
}
});
}
// 添加alwaysShow属性给有子路由的项
// if (transformedRoute.children && transformedRoute.children.length > 0) {
// transformedRoute.alwaysShow = true;
// }
// console.log('transformedRoute',transformedRoute)
return transformedRoute;
});
}
// // 使用示例
// const transformedRoutes = transformRoutes(originalRoutes);
// console.log(transformedRoutes);
......
Markdown 格式
0% 或
您添加了 0 人 到此讨论。请谨慎行事。
请先完成此评论的编辑！
请 注册 或者 后发表评论