liweilong
2020-12-09 855cab1e2835ec50e467b235df382ac1f9dfad1d
提交 | 用户 | age
2a61f6 1 <template>
L 2   <div :class="{'has-logo':showLogo}">
3     <logo v-if="showLogo" :collapse="isCollapse" />
4     <el-scrollbar wrap-class="scrollbar-wrapper">
5       <el-menu
6         :default-active="activeMenu"
7         :collapse="isCollapse"
8         :background-color="variables.menuBg"
9         :text-color="variables.menuText"
10         :unique-opened="false"
11         :active-text-color="variables.menuActiveText"
12         :collapse-transition="false"
13         mode="vertical"
14       >
15         <sidebar-item v-for="route in routes" :key="route.path" :item="route" :base-path="route.path" />
16       </el-menu>
17     </el-scrollbar>
18   </div>
19 </template>
20
21 <script>
22 import { mapGetters } from 'vuex'
23 import Logo from './Logo'
24 import SidebarItem from './SidebarItem'
25 import variables from '@/styles/variables.scss'
26
27 export default {
28   components: { SidebarItem, Logo },
29   computed: {
30     ...mapGetters([
31       'sidebar'
32     ]),
33     routes() {
34       let routes = this.$router.options.routes
35       routes = this.jun_filterAuth(routes, this.getAuthDataFN())
36       // console.log('this.getAuthDataFN()', this.getAuthDataFN())
37       // console.log('$router.options.routes', this.$router.options.routes)
38       // console.log('routes', routes)
39       return routes
40     },
41     activeMenu() {
42       const route = this.$route
43       const { meta, path } = route
44       // if set path, the sidebar will highlight the path you set
45       if (meta.activeMenu) {
46         return meta.activeMenu
47       }
48       return path
49     },
50     showLogo() {
51       return this.$store.state.settings.sidebarLogo
52     },
53     variables() {
54       return variables
55     },
56     isCollapse() {
57       return !this.sidebar.opened
58     }
59   },
60   methods: {
61     // 过滤侧边栏权限
62     jun_filterAuth(menuData, authData) {
63       return menuData.filter((menu) => {
64         // 仅有一级菜单
65         if (!menu.children) {
66           // 不存在权限的话,默认显示
67           // console.log(menu.auth, menu.auth ? !!authData[menu.auth] : true)
68           // 忽视hidden=true
69           return menu.auth ? !!authData[menu.auth] : !menu.hidden
70         }
71         // 有二级菜单
72         if (menu.children.length) {
73           // 递归
74           menu.children = this.jun_filterAuth(menu.children, authData)
75           return menu.children.length
76         }
77       })
78     }
79   }
80 }
81 </script>