Vue3+Element-Plus动态加载主页Aside（左侧）菜单数据⼆
五
1. 通过接⼝动态获取左侧菜单数据
1.1 获取接⼝前的注意事项
1. 按照接⼝⽂档要求，除了登录接⼝外，需要授权的API 必须要在请求头中使⽤Authorization字段提供token 令牌
意思是说，访问接⼝必须得到服务器授权才能正常调⽤。
2. 如何获取服务器的授权认证。
前⾯章节已经讲过，登录成功后。服务器端会返回⼀个登录成功后的（ token）令牌，这个token 令牌就是权限认证的字段
（Authorization）
所以在请求⼀些授权API时，必须在请求头中使⽤ （Authorization）字段，让Authorization 字段 的值等于token令牌的字符串3. 如何在请求头中添加Authorization （权限认证）字段
通过 Axios 拦截器添加 Authorization 字段
原理：在Axios 请求拦截器中获取 token 令牌的字符串，再赋值给 Authorization 字段，从⽽保证请求时拥有获取数据的权限
3.1 如何为Axios 添加请求拦截器，并挂载⼀个⾃定义属性
// 请求拦截器
quest.u(config => {
// 为请求头对象，添加 Token 验证的 Authorization 字段
config.headers.Authorization = Item('token')
// 在最后必须 return config
return config
})
3.2 请求拦截器原理解析
1. 导⼊了axios 包后，通过axios调⽤interceptors 属性，该属性有⼀个成员属性叫request，request就是⼀个请求拦截器。那么可以
通过u 属性为request 请求拦截器挂载⼀个回调函数。这个回调函数作⽤是，对发送的请求进⾏预处理。
2. 也就是说，只要通过axios 向服务器发起数据请求，那么在请求期间必然会优先调⽤ u 函数进⾏数据的预处理。
总结：
请求拦截器相当于预处理的过程，预处理的对象是：本次的请求。
3.3 接下来对设置的请求对象 config 进⾏详细讲解，它包含了多个属性
1. config 对象中，包含了headers 属性，它就是⼀个请求头 ，但是它并没有Authorization 字段
2. 接下来，需要给请求头headers ，通过⾃定义拦载器为它挂载⼀个Authorization 字段
3. 刷新页⾯，再来查看字段已添加成功。但是Authorization 的值为什么是空呢，因为在登录期间，服务器还没有给⽤户颁发 token 令
牌 ，因此在这⾥它默认就是空。
4. 如果登录之后，再去调⽤其他接⼝ ，例如左侧菜单接⼝。再去监听请求的话，Authorization 值肯定不为空了。⽽是⼀个真正的 token 令牌了。
总结
服务器接受请求时，判断Authorization 是否符合要求。如果符合要求，才会进⾏响应。如若不符合要求，或者是说 Authorization 值为空，服务器就驳回本次请求。
通过axios 配置了请求拦截器，为每⼀次的api 请求挂载了⾃定义的⼀个Authorization 请求头，确保了能正常访问调⽤有权限的API 4. 发起请求，获取左侧数据菜单
4.1 根据左侧菜单⽂档
get 请求
路径 menus
4.2 如上图，服务器响应的⼤对象中，包含在 data 和meta 两个属性。其中meta 状态码等于200 证明请求成功。请求成功后，data 中包含了服务器所返回的菜单列表，每⼀个菜单都是由id，authName,path,children 属性组成。children属性 代表有⼆级菜单。每⼀个⼆菜单也都是由id，authName,path,children 属性组成。
1. 请求左侧思路：当界⾯加载前，就应该⽴即获取左侧菜单数据。
2. 通过vue ⽣命周期函数created 来实现
3. 如上，通过使⽤花括号进⾏解构赋值，把data 属性解构出来并重命名为 res 进⾏接收
4.3 数据获取成功后，如何渲染在页⾯中呢？
1. 渲染思路：获取到数据后，需要挂载在 data 中。所以需要在data 中定义⼀个数据接收对象。该数据接收对象需要和返回的data 数据属性⼀⾄。例如。返回的data 是⼀个数组，那么定义的数据接收对像 menulist 也应当是⼀个数组。
2. 渲染左侧菜单
2.1 通过上⾯解构赋值后，已成功把获取到的左侧菜单数据保存在 menulist 中
1. 接下来，根据 menulist 中保存的数据进⾏绘制左侧菜单UI 结构
1.1 如何绘制
⾸先，根据数据结构进⾏分析，所有的⼀级菜单数据保存在data 中。每⼀个⼀级菜单中，通过children 属性⼜嵌套了⼆级菜单
