Vue_通过接口获取菜单数据，发起请求获取左菜单数据

---

前言

如果想正常调用后台的api的话我们需要给他进行授权，而在电商后台管理系统的api文档中提到：需要授权的 API ，必须在请求头中使用 Authorization 字段提供 token 令牌

---

一、通过axios请求拦截器添加token

在main.js中添加axios请求拦截器。代码如下（示例）：

// 通过axios请求拦截器添加token，保证拥有获取数据的权限
// 调用axios的请求拦截器，为请求拦截器挂载回调函数
// 请求在到达服务器之前会首先调用use回调函数对请求进行预处理
axios.interceptors.request.use(config => {
  console.log(config)
  // 为请求头对象，添加Token验证Authorization字段
  config.headers.Authorization = window.sessionStorage.getItem('token')
  // 在最后必须return config
  return config

二、发起请求获取左菜单数据

1.在页面创建时调用请求方法

该模块应该是在我们打开页面时就调用到全部菜单的内容，那么我们首先就应该在created生命周期函数中创建getMenuList()方法

  created () {
    // 在整个页面刚加载时就应立刻获取左侧菜单
    this.getMenuList()
  }

2.创建菜单集合

需要有一个集合踩存放我们调用到的数据：

 data () {
    return {
      // 左侧菜单数据
      menulist: []
    }
  }

3.获取左菜单数据

代码如下：

    // 获取所有菜单
    // await 关键字 只能放在 async 函数内部， await关键字的作用就是获取Promise中返回的内容， 获取的是Promise函数中resolve或者reject的值
    // 如果await 后面并不是一个Promise的返回值，则会按照同步程序返回值处理,为undefined
    async getMenuList () {
      const { data: res } = await this.$http.get('menus')
      if (res.meta.status !== 200) return this.$message.error(res.meta.msg)
      this.menulist = res.data
      console.log(res)
    }

效果截图：