0830作业

1. 今天的功能代码写熟练，重点是自己分析需求反推思路和步骤，不是抄代码
2. 实现header里面的内容(布局 + 点击收起左侧菜单 + 显示当前用户的用户名 + 下拉菜单)
3. 尝试实现 左侧 菜单的点击在右边跳转
4. 尝试实现 退出登录功能
5. 尝试实现 当用户在已经登录的情况下，无法访问登录页面

梳理动态生成路由

目标：根据不同的用户生成不同的路由，为了保证用户的权限安全

怎么做？

1.利用router.addRoute来生成，需要传递一个参数 , { path:'', component: xxx }

2.添加的路由的参数依赖于后端数据

3.先发请求 ， 在哪里发 ？ 全局前置守卫 ！！！ 为什么 ？ 为保证无论是登录后，还是刷新后，都要拿数据

router.beforeEach((to, from, next) => {
  const userStore = useUserStore();
  let token = localStorage.getItem('token');
  // 当 已经登录，并且 没有 用户的路由数据的时候，才需要发请求
  if (token && userStore.menuData.length == 0) {
  // ....

4.数据请求回来了，然后需要动态添加，现在的的做法是，先处理成二层结构，为什么？因为我们在写页面的路径的时候，是把页面组件以功能模块来进行管理的，于是导致需要得到外层文件夹的路径，所以需要组件的父级。

5.其实和动态路由无关，我们是把生成二层的代码进行了复用，封装到了common文件夹里面。

6.生成二层，然后遍历生成动态路由。目的还是分类管理

// 还要把 res.data.menus 变成双层结构
const result = processMenu(res.data.menus)
// 遍历 result 动态生成路由
result.forEach(item => {
    // 以权限/商品/订单/营销为上层，进行功能的分类， 上层就是 父路由 --> 分组
    const route: RouteRecordRaw = {
        path: '/' + item.name,
        component: HomeVue,
        children: []
    }
    // 再把所有的子级路由都添加进去
    item.children.forEach((child) => {
        route.children.push({
            path: child.name,
            // import 导入的路径是  
            component: () => import(`../views/${item.name}/${child.name}.vue`)
        })

    })
    // 把父子级路由添加进去 - 添加路由是异步的
    router.addRoute(route);
})

7.控制放行的时机。请求路由数据是异步的，在刷新的时候进行页面组件如果不是在路由生成之后，会白屏。

router.beforeEach((to, from, next) => {
  const userStore = useUserStore();
  let token = localStorage.getItem('token');
  // 当 已经登录，并且 没有 用户的路由数据的时候，才需要发请求
  if (token && userStore.menuData.length == 0) {
      // ...  
  }else {
      next();
  }

第一次进入 beforeEach , if的条件先满足， 就不会先放行 ， 等到请求成功后才放行。

8.请求成功后放行还是不行，因为addRoute的过程也是异步的，需要等待addRoute完成后才放行。但是 addRoute 什么时候完成？不知道 。 所以我们让 next 放行的时候，传递一个参数，就会再次进入 beforEach ， 此时，addRoute 已经完成。并且 if 条件不成立， 走 else ，放行成功。

将来如果要提问，最快的方式

将来如果进公司上班了，难免有些bug自己解决起来花了很长时间没有搞定。如果通过网络的方式沟通，推荐的沟通方式如下：

提问的说明格式如下：

1.你在做什么需求，最好有一定截图说明

2.你的思路是什么，目前进行到哪一步，卡在哪

3.如果有报错，最好把报错也一起截图或者把自己查找的资料链接一并发过来

0901作业

1. 一定要跟上今天的内容(路由动态生成是重点)

   今天的内容包括

   ​ a. provide/inject实现左侧菜单的显示隐藏

   ​ b. 动态生成路由

   ​ c. 菜单默认展开+点击路由跳转

   ​ d. 退出登录 + 强制在登录状态下无法访问登录页面

   ​ e.

2. 实现请求统一错误处理

3. 实现token过期处理

4. 把首页的路由和菜单实现

5. 用户列表的静态

0902作业

1. 今天的内容跟上

   a. 表格数据渲染

   b. 添加用户

   c. 编辑用户

2. 实现分配角色

3. 尝试实现表格分页效果

4. 尝试实现角色列表(表格渲染数据、添加角色、编辑角色)

0903 作业

1. 今天内容 a. 分配角色(理解业务) b. 分页器 c. 取消请求 d. useTable(难点)
2. 编辑角色 + 添加角色 + 搜索
3. 把之前几天的内容再梳理一下