背景： 在部门内率先使用vue3+vite的框架进行搭建开发，需求是根据不同的用户角色添加不同的路由，就是同一个url不同角色的用户看到的系统菜单栏是不同的。
解决思路：
-
通过ajax异步获取当前用户的角色
-
根据用户角色动态添加路由
任务分配： 目标对象：工作3年的前端程序员
该同事解决思路： 在main.ts里，调用ajax获取当前用户的角色信息,响应后将用户角色信息保存到pina里，最后在router里获取pina的数据，动态创建vue-router。
// ajax异步获取角色信息
userRole()
.then(res => {
const { resultData } = res // 角色信息
userStore.role = resultData
})
.catch(err => {
ElMessage.error('判断登录人权限失败，请刷新')
})
// 动态配置路由
const routes1 = [...] // 路由1，（这里只做示例，忽略代码正确性）
const routes2 = [...] // 路由2
const role = userStoreData.role
const router = createRouter({
history: createWebHashHistory(),
routes: role ? routes1 : routes2
})
该同事的关键问题是，没有对同步和异步有深入的理解。 代码初始化阶段，路由的引入是在main.ts的头部，因此会先执行route的实例化，此时pina里还没有数据。
解决方案：
搞清楚原因后，就开始着手修改：
- 如何让在异步之后才确定具体的路由配置，vue-router提供了addRoute。那么可以先实例化一个空路由的route实例。
- 页面的菜单栏，我们是自动化地从路由路提取出来的。那么，需要解决确定路由后才显示页面内容。解决思路可以在App.vue里ajax请求用户角色，然后动态添加路由；其实，还有一个更简单的办法并且在main.ts里就能够实现，就是moute()挂载。
userRole()
.then(res => {
const { resultData } = res
userStoreData.isNotAdmin = parseInt(resultData)
router.addRoute(route) // ajax之后才去配置route的路由
app.use(router) // ajax之后才将router挂载到vue实例
app.mount('#app') // ajax之后才挂载html，解决页面显示菜单栏的问题
})
.catch(err => {
ElMessage.error('判断登录人权限失败，请刷新')
})
const router = createRouter({
history: createWebHashHistory(),
routes: [] // 创建空路由的router实例对象
})
总结：
- 解决问题的api：mount() addRoute()
- 前端开发需要对异步和同步要深入理解
- 在理解的基础上编写代码，关键时候能够解决较难的问题，比如mount，日常一般不会对框架的代码做改动。理解了，关键时候能提供很大帮助。
最后：该同事的回复：
最后，并且将我的解决思路分享给了其他同事，看来遇到这个问题的不在少数。因此将该思路分享出来~~ 虽然简单，但知识需要积累后才能薄发！！！
