第五节

1、路由导航守卫-判断用户是否已经登录

  1. // 判断是否登录
  2. router.beforeEach((to) => {
  3.   if (to.path !== '/login') {
  4.     const token = localCache.getCache('token')
  5.     if (!token) {
  6.       return '/login'
  7.     }
  8.   }
  9. })

2、用户刷新页面后Pinia数据重载（第五节 后期）

  1. import { createApp } from 'vue'
  2. import App from './App.vue'
  3. import router from './router'
  4. import { createPinia } from 'pinia'
  5. import { useLoginStore } from './store/login/login'
  6. import 'normalize.css'
  7. import './assets/css/index.less'
  9. const app = createApp(App)
  10. app.use(router)
  11. app.use(createPinia())
  13. // 每次刷新页面都加载本地信息，将本地信息同步到pinia
  14. const loginStore = useLoginStore()
  15. loginStore.loadLocalLogin()
  17. app.mount('#app')
  1. import { defineStore } from 'pinia'
  3. import localCache from '@/utils/cache'
  4. import router from '@/router'
  6. export const useLoginStore = defineStore('login', {
  7.   state: () => ({
  8.     token: '',
  9.     userInfo: {},
  10.     userMenus: []
  11.   }),
  12.   getters: {},
  13.   actions: {
  14.     // 这个方法要在main.ts中调用
  15.     loadLocalLogin() {
  16.       const token = localCache.getCache('token')
  17.       if (token) {
  18.         this.token = token
  19.       }
  20.       const userInfo = localCache.getCache('userInfo')
  21.       if (userInfo) {
  22.         this.userInfo = userInfo
  23.       }
  24.       const userMenus = localCache.getCache('userMenus')
  25.       if (userMenus) {
  26.         this.userMenus = userMenus
  27.       }
  28.     }
  29.   }
  30. })

第六节

1、main页面目录结构设计

image.pngindex.ts是专门做导出的

image.png

2、在模板中使用目录别名

  1. <template>
  2.   <img src="~@/assets/logo.png" alt="logo" />
  3. </template>

3、菜单接口类型

  1. {
  2.   "code": 0,
  3.   "data": {
  4.     "list": [
  5.       {
  6.         "id": 1,
  7.         "name": "系统管理",
  8.         "type": 1, // type=1:可以展开的菜单
  9.         "url": "/main/system",
  10.         "icon": "el-icon-setting",
  11.         "sort": 2,
  12.         "createAt": "2021-01-02T10:08:14.000Z",
  13.         "updateAt": "2021-08-20T07:00:08.000Z",
  14.         "children": [
  15.           {
  16.             "id": 2,
  17.             "url": "/main/system/user",
  18.             "name": "用户管理",
  19.             "sort": 100,
  20.             "type": 2,  // type=2 页面选项
  21.             "children": [
  22.               {
  23.                 "id": 5,
  24.                 "url": null,
  25.                 "name": "创建用户",
  26.                 "sort": null,
  27.                 "type": 3,  // type=3 按钮权限
  28.                 "createAt": "2021-01-03 13:41:01.000000",
  29.                 "parentId": 2,
  30.                 "updateAt": "2021-08-19 16:10:06.000000",
  31.                 "permission": "system:users:create"
  32.               }
  33.             ],
  34.             "createAt": "2021-01-02 18:08:47.000000",
  35.             "parentId": 1,
  36.             "updateAt": "2021-08-19 15:52:01.000000"
  37.           }
  38.         ]
  39.       },
  40.       {
  41.         "id": 38,
  42.         "name": "系统总览",
  43.         "type": 1,
  44.         "url": "/main/analysis",
  45.         "icon": "el-icon-monitor",
  46.         "sort": 1,
  47.         "createAt": "2021-04-19T14:11:02.000Z",
  48.         "updateAt": "2021-08-20T06:59:55.000Z",
  49.         "children": [
  50.           {
  51.             "id": 39,
  52.             "url": "/main/analysis/overview",
  53.             "name": "核心技术",
  54.             "sort": 106,
  55.             "type": 2,
  56.             "children": null,
  57.             "createAt": "2021-01-02 18:09:11.000000",
  58.             "parentId": 38,
  59.             "updateAt": "2021-08-19 15:54:41.000000"
  60.           }
  61.         ]
  62.       }
  63.     ]
  64.   }
  65. }

对应的Element 展示模板

  1. <template>
  2.   <div class="nav-menu">
  3.     <div class="logo">
  4.       <img class="img" src="~@/assets/img/logo.svg" alt="logo" />
  5.       <span v-if="!collapse" class="title">Vue3+TS</span>
  6.     </div>
  8.     <!-- ======================菜单================= -->
  9.     <el-menu
  10.       default-active="2"
  11.       class="el-menu-vertical"
  12.       :collapse="collapse"
  13.       background-color="#0c2135"
  14.       text-color="#b7bdc3"
  15.       active-text-color="#0a60bd"
  16.     >
  17.       <template v-for="item in userMenus" :key="item.id">
  18.         <!-- 一级菜单 -->
  19.         <template v-if="item.type === 1">
  20.           <!-- 一级菜单的可以展开的标题 -->
  21.           <el-submenu :index="item.id + ''">
  22.             <!-- 一级菜单信息 -->
  23.             <template #title>
  24.               <i v-if="item.icon" :class="item.icon"></i>
  25.               <span>{{ item.name }}</span>
  26.             </template>
  27.             <!-- 遍历里面的item -->
  28.             <template v-for="subitem in item.children" :key="subitem.id">
  29.               <el-menu-item :index="subitem.id + ''">
  30.                 <i v-if="subitem.icon" :class="subitem.icon"></i>
  31.                 <span>{{ subitem.name }}</span>
  32.               </el-menu-item>
  33.             </template>
  34.           </el-submenu>
  35.         </template>
  37.         <!-- 二级菜单 -->
  38.         <template v-else-if="item.type === 2">
  39.           <el-menu-item :index="item.id + ''">
  40.             <i v-if="item.icon" :class="item.icon"></i>
  41.             <span>{{ item.name }}</span>
  42.           </el-menu-item>
  43.         </template>
  44.       </template>
  45.     </el-menu>
  46.   </div>
  47. </template>

4、权限管理的原理

image.png

动态路由的几种方案

第一种
将所有的url映射都写出来，看看当前用户有什么菜单，就显示什么
缺点：如果用户直接输入url，会有风险！
第二种
动态路由的第二种方案.png
缺点，角色是枚举出来的，映射是写死的，如果新添加角色，就得修改前端代码！！
第三种
动态路由的第三种方案.jpg
这里就需要后端的配合了！后端需要在数据库中为每个菜单存一个url！！！

第七节

1、高级组件封装

  1. <script lang="ts">
  2. import { defineComponent, PropType } from 'vue'
  3. import { IFormItem } from '../types'
  5. export default defineComponent({
  6.   props: {
  7.     formItems: {
  8.       type: Array as PropType<IFormItem[]>,
  9.       default: () => [] // 默认值为数组或者对象时，要用箭头函数，和this有关系
  10.     },
  11.     labelWidth: {
  12.       type: String,
  13.       default: '100px'
  14.     },
  15.     itemStyle: {
  16.       type: Object,
  17.       default: () => ({ padding: '10px 40px' })
  18.     },
  19.     colLayout: {
  20.       type: Object,
  21.       default: () => ({
  22.         xl: 6, // >1920px 4个
  23.         lg: 8,
  24.         md: 12,
  25.         sm: 24,
  26.         xs: 24
  27.       })
  28.     }
  29.   },
  30.   setup() {
  31.     return {}
  32.   }
  33. })
  34. </script>

第八节

1、一刷新就NotFound

  1. app.use(router)
  2. // 每次刷新页面都加载本地信息，将本地信息同步到pinia
  3. const loginStore = useLoginStore()
  4. loginStore.loadLocalLogin()

换一下顺序即可

  1. const loginStore = useLoginStore()
  2. loginStore.loadLocalLogin()
  4. app.use(router)

2、路径映射出菜单

先写工具函数

  1. // 这波递归很溜
  2. export function pathMapToMenu(userMenus: any[], currentPath: string): any {
  3.   for (const menu of userMenus) {
  4.     if (menu.type === 1) {
  5.       const findMenu = pathMapToMenu(menu.children ?? [], currentPath) // 这里接住！
  6.       if (findMenu) {
  7.         return findMenu
  8.       }
  9.     } else if (menu.type===2 && menu.url === currentPath) {
  10.       return menu  // 这里返回
  11.     }
  12.   }
  13. }

然后使用

  1. <template>
  2.   <div class="nav-menu">
  3.     <div class="logo">
  4.       <img class="img" src="~@/assets/img/logo.svg" alt="logo" />
  5.       <span v-if="!collapse" class="title">Vue3+TS</span>
  6.     </div>
  7.     <el-menu :default-active="defaultValue" class="el-menu-vertical" :collapse="collapse" background-color="#0c2135"
  8.       text-color="#b7bdc3" active-text-color="#0a60bd">
  9.       <!--省略。。。-->
  10.     </el-menu>
  11.   </div>
  12. </template>
  14. <script lang="ts">
  15. import { defineComponent, computed, ref } from 'vue'
  16. import { useLoginStore } from '@/store/login/login'
  17. import { useRouter, useRoute } from 'vue-router'
  18. import { pathMapToMenu } from '@/utils/map-menus'
  19. // vuex - typescript  => pinia
  21. export default defineComponent({
  22.   props: {
  23.     collapse: {
  24.       type: Boolean,
  25.       default: false
  26.     }
  27.   },
  28.   setup() {
  30.     // store
  31.     const store = useLoginStore()
  32.     const userMenus = computed(() => store.userMenus)
  34.     //router  （学习一下是如何使用route和router的）
  35.     const router = useRouter()
  36.     const route = useRoute()
  37.     const currentPath = route.path  // 拿到当前路径
  38.     // data
  39.     const menu = pathMapToMenu(userMenus.value, currentPath)  // 因为computed返回的是ref，所以要用其value
  40.     const defaultValue = ref(menu.id + '')  // 因为组件只接受字符串，所以这里加一个空字符串
  41.     // 事件处理
  42.     const handleMenuItemClick = (item: any) => {
  43.       router.push({
  44.         path: item.url ?? '/not-found'
  45.       })
  46.     }
  47.     return {
  48.       userMenus,
  49.       defaultValue,
  50.       handleMenuItemClick
  51.     }
  52.   }
  53. })
  54. </script>

尝试一下，问题解决，但是现在又有了另一个问题：
当尝试调到首页时，啥也不展示了，这是为什么呢？
很简单，因为main不对应任何一个菜单，上面的//data部分，获得的menu是空的，自然没有menu.id，这地方就报错了！
理想情况是：当用户访问首页时，我们定位到第一个菜单上：
只需在src\utils\map-menus.ts中定义一个firstMenu变量，在动态加载路由将其记录下来，然后再回到src\router\index.ts中，加一个全局的路由导航守卫就OK了。

  1. router.beforeEach((to) => {
  2.   if (to.path === '/main') {
  3.     return firstMenu.url  // 注意，是返回路由的url字符串，而非给to.path赋值！
  4.   }
  5. })