阅读学习优秀源码,分析实现原理, 路由采用后端动态返回策略, 会略去多余代码

文件LoginForm.vue, 主要方法signIn和getRole

// 登录
const signIn = async () => {
  const formRef = await getElFormExpose()
  await formRef?.validate(async (isValid) => {
    if (isValid) {  // 表单校验
      loading.value = true
      const formData = await getFormData<UserType>()
      try {
        const res = await loginApi(formData)   //  登陆成功 获取用户信息
          userStore.setUserInfo(res.data)  //  存储用户信息
         //  略去判断   直接使用动态路由
          getRole()
      } finally {
        loading.value = false
      }
    }
  })
}
// 获取角色信息
const getRole = async () => {
  const formData = await getFormData<UserType>()
  const params = {  roleName: formData.username  }
  const res = await getAdminRoleApi(params)
  //  上面模拟根据角色获取带嵌套的父子路由   实际开发 可以改成 直接返回权限路由表
  if (res) {
    // 这里是首次登陆  获取并设定路由信息
    const routers = res.data || []
    userStore.setRoleRouters(routers)
//  此处 把常量路由  和动态路由进行合并
    await permissionStore.generateRoutes('server', routers).catch(() => {})
// 动态添加可访问路由表
    permissionStore.getAddRouters.forEach((route) => {
      addRoute(route as RouteRecordRaw) 
    })
//  全局标记已获取过路由, 后续路由拦截里会直接放行next()
    permissionStore.setIsAddRouters(true)
// 跳转到重定向路由 或者权限路由第一项
    push({ path: redirect.value || permissionStore.addRouters[0].path })
  }
}