Skip to content

T
test_git

uuai / test_git

通知 1
Star 0
Fork 0
T
test_git

前往新版Gitcode，体验更适合开发者的 AI 搜索 >>

提交 a382159b 编写于 作者: W wuyb@phxg.cn
浏览文件
操作

element

上级 7b360abb
隐藏空白更改
内联 并排
Showing with 128 addition and 46 deletion
vite-demo/src/permission.js
浏览文件 @ a382159b
......@@ -3,10 +3,11 @@ import store from "./store";
import {getToken} from '@/utils/auth'
import {message} from 'ant-design-vue'
import {accessControl} from './config'
const whiteList = ['/login']
router.beforeEach(async (to, from, next) => {
console.log('11111111111111111111',to, from);
console.log('11111111111111111111', to, from);
const hasToken = getToken()
if (hasToken) {
if (to.path === 'login') {
......@@ -15,11 +16,16 @@ router.beforeEach(async (to, from, next) => {
const hasRoles = store.getters.roles && store.getters.roles.length > 0
if (hasRoles) {
console.log('哟权限');
try {
next()
}catch (e) {
console.log('ddddds',e);
}
try {
// if (to.matched.length === 0) { //如果未匹配到路由
// from.name ? next({name: from.name}) : next('/'); //如果上级也未匹配到路由则跳转登录页面，如果上级能匹配到则转上级路由
// } else {
// next(); //如果匹配到正确跳转
// }
next(); //如果匹配到正确跳转
} catch (e) {
console.log('ddddds', e);
}
} else {
try {
// 获取用信息
......@@ -27,9 +33,9 @@ router.beforeEach(async (to, from, next) => {
console.log('getUserInfo', roles);
// 获取用户权限路由
let accessRoutes = []
if(accessControl.source==='front'){
if (accessControl.source === 'front') {
accessRoutes = await store.dispatch('getFrontRoutes', roles)
}else {
} else {
accessRoutes = await store.dispatch('getBackRouter', hasToken)
}
......
vite-demo/src/router/authRouter.js
浏览文件 @ a382159b
import Layout from "@/views/layout/index.vue";
export default [
{
path: '/auth',
......
vite-demo/src/router/baseRouter.js
浏览文件 @ a382159b
......@@ -28,5 +28,5 @@ export default [
}
]
},
// {path: '/:pathToRegexp(.*)', hidden: true, redirect: '/'} //当用户输入页面链接错误或者没有该页面时，显示该路径页面
{path: '/:pathMatch(.*)', hidden: true, redirect: '/'} //当用户输入页面链接错误或者没有该页面时，显示该路径页面
]
\ No newline at end of file
vite-demo/src/store/modules/permission.js
浏览文件 @ a382159b
......@@ -25,6 +25,7 @@ const comp = import.meta.glob(`/src/views/**/*/*.vue`);
// const comp = comp1.concat(comp2)
import Layout from "@/views/layout/index.vue";
console.log('component', comp);
export function filterAsyncRoutes(routes, roles) {
......
vite-demo/src/views/layout/index.vue
浏览文件 @ a382159b
......@@ -13,15 +13,16 @@
</template>
<script>
import sidebar from './sidebar/index.vue'
import sidebar from './sidebar/menu.vue'
import {mapGetters} from 'vuex'
import zhCN from 'ant-design-vue/es/locale/zh_CN';
import moment from 'moment';
import 'moment/dist/locale/zh-cn';
moment.locale('zhCN');
export default {
name: "index",
data(){
data() {
return {
zhCN
}
......@@ -43,6 +44,7 @@
display: flex;
height: 100%;
}
.app-content {
overflow-y: auto;
}
......
vite-demo/src/views/layout/sidebar/index.vue
浏览文件 @ a382159b
......@@ -17,7 +17,7 @@
<template #icon>
<AppstoreOutlined/>
</template>
<template #title>{{item.meta.title}}</template>
<template #title>{{item.meta.title}} - ? {{item.path}}</template>
<div v-if="item.children" v-for="(c,cIndex) in item.children">
<!--'sub'+(index + (index + cIndex))-->
<a-sub-menu :key="c.path"
......@@ -26,31 +26,20 @@
<!-- 三级 :key="index + cIndex + childIndex + (index+cIndex)"-->
<a-menu-item v-for="(child,childIndex) in c.children"
:key="child.path">
<router-link :to="{name:child.path}">{{child.meta.title}}
<router-link :to="{name:child.path}">
{{child.meta.title}}
</router-link>
</a-menu-item>
</a-sub-menu>
<!--二级-->
<!-- <a-menu-item v-else :key="c.path + index + cIndex">-->
<!-- <a-menu-item v-else :key="c.path + index + cIndex">-->
<a-menu-item v-else :key="c.path">
<router-link :to="{name:c.path}">{{c.meta.title}}</router-link>
</a-menu-item>
</div>
</a-sub-menu>
<!-- <a-sub-menu key="sub2">-->
<!-- <template #icon>-->
<!-- <AppstoreOutlined/>-->
<!-- </template>-->
<!-- <template #title>Navigation Two</template>-->
<!-- <a-menu-item key="9">Option 9</a-menu-item>-->
<!-- <a-menu-item key="10">Option 10</a-menu-item>-->
<!-- <a-sub-menu key="sub3" title="Submenu">-->
<!-- <a-menu-item key="11">Option 11</a-menu-item>-->
<!-- <a-menu-item key="12">Option 12</a-menu-item>-->
<!-- </a-sub-menu>-->
<!-- </a-sub-menu>-->
</div>
</a-menu>
</div>
......@@ -78,12 +67,13 @@
}
},
setup() {
const route = useRoute()
const state = reactive({
collapsed: false,
// selectedKeys: ['welcome'], //当前选中的
selectedKeys: ['welcome'], //当前选中的
openKeys: ['/'], // 当前展开的 SubMenu 菜单项 key 数组
preOpenKeys: ['sub1'],
preOpenKeys: ['/'],
});
watch(
() => state.openKeys,
......@@ -91,30 +81,25 @@
state.preOpenKeys = oldVal;
},
);
const selectedKeys = computed(() => {
console.log('useRoute', route.path);
let path = route.path.split('/')
// console.log('path', path, path[path.length - 1]);
// state.openKeys = '/' + [path[path.length - 2]]
// return [path[path.length - 1]]
})
console.log('selectedKeys', selectedKeys);
// activeMenu() {
// const route = this.$route
// const { meta, path } = route
// // if set path, the sidebar will highlight the path you set
// if (meta.activeMenu) {
// return meta.activeMenu
// }
// return path
// },
// const selectedKeys = computed(() => {
// console.log('selectedKeys - useRoute', route.path);
// let path = route.path.split('/')
// // console.log('path', path, path[path.length - 1]);
// // state.openKeys = '/' + [path[path.length - 2]]
// // return [path[path.length - 1]]
// console.log('selectedKeys - useRoute - path', path);
// console.log('selectedKeys - useRoute - path - route', [route.path]);
// // return [route.path]
// })
// console.log('selectedKeys - wqe', selectedKeys);
const toggleCollapsed = () => {
state.collapsed = !state.collapsed;
state.openKeys = state.collapsed ? [] : state.preOpenKeys;
};
return {...toRefs(state), toggleCollapsed, selectedKeys};
return {...toRefs(state), toggleCollapsed};
},
components: {
......
vite-demo/src/views/layout/sidebar/menu.vue 0 → 100644
浏览文件 @ a382159b
<template>
<div style="width: 256px" class="sidbar">
<el-menu
active-text-color="#ffd04b"
background-color="#545c64"
text-color="#fff"
default-active="2"
class="el-menu-vertical-demo layout-menu"
:collapse="isCollapse"
@open="handleOpen"
>
<div v-for="(item,index) in router" :key="index">
<el-sub-menu :index="item.path" v-if="!item.hidden">
<template #title>
<span>{{item.meta.title}}</span>
</template>
<template v-if="item.children" v-for="(c,cIndex) in item.children">
<el-sub-menu :index="child.path"
v-if="c.children"
v-for="(child,childIndex) in c.children">
<template #title>
<router-link :to="{name:child.path}">{{child.meta.title}}</router-link>
</template>
<el-menu-item :index="c.path">
<router-link :to="{name:child.path}">{{child.meta.title}}</router-link>
</el-menu-item>
</el-sub-menu>
<el-menu-item-group v-else>
<el-menu-item :index="c.path"> {{c.meta.title}}</el-menu-item>
</el-menu-item-group>
</template>
</el-sub-menu>
</div>
</el-menu>
</div>
</template>
<script>
import {ref} from 'vue'
import {ElMenu, ElMenuItem, ElSubMenu} from 'element-plus'
import {useRoute} from 'vue-router'
export default {
components: {
ElMenu, ElMenuItem, ElSubMenu
},
props: {
router: {
type: Array,
default: () => {
return []
}
}
},
setup(props) {
console.log('props', props)
const isCollapse = ref(false)
const handleOpen = (key, keyPath) => {
console.log(key, keyPath)
}
const handleClose = (key, keyPath) => {
console.log(key, keyPath)
}
const route = useRoute()
return {
isCollapse, handleOpen
}
}
}
</script>
<style>
.sidbar, .layout-menu {
height: 100%;
overflow: hidden auto;
}
.el-menu-vertical-demo:not(.el-menu--collapse) {
width: 200px;
min-height: 400px;
}
</style>
\ No newline at end of file
Markdown is supported
0% 或 .
You are about to add 0 people to the discussion. Proceed with caution.
先完成此消息的编辑！
想要评论请 注册 或