使用Axios调用API无法获取用户列表，v-data-table无数据显示

问题描述 #

使用Vuetify的v-data-table组件展示用户列表时，页面提示“无数据可用”。通过Thunder Client携带Bearer Token发起GET请求能正常获取用户数据，但Vue项目中用Axios调用同一API却无法获取数据，导致表格无数据展示。

前端Vue页面代码（userDirectory.vue） #

<template>
  <div class="userDirectory">
    <v-subheader class="d-flex justify-space-between align-center">
      <h3>User Directory</h3>
    </v-subheader>
    <v-row>
      <v-card>
        <template>
          <v-data-table :headers="headers" :items="users" :items-per-page="5" class="elevation-1"></v-data-table>
        </template>
      </v-card>
    </v-row>

  </div>
</template>

<script>
import axios from 'axios'
export default {
  data: () => ({
    headers: [
    {
            text: 'User ID',
            align: 'start',
            sortable: false,
            value: 'u.id',
          },
          { text: 'Created At', value: 'created_at' },
          { text: 'Email', value: 'email' },
          { text: 'Is Premium', value: 'is_premium' },
          { text: 'Goal', value: 'goal' },
          { text: 'Fitness Level', value: 'fitness_level' },
          { text: 'Profile Completed', value: 'profile_completed' },
          { text: 'Accepted Health Warning', value: 'accepted_health_warning' },
          { text: 'Role', value: 'roles_list' },
    ],
    users: [],
  }),
  methods: {
    async loadUsers() {
      axios.get('https://somehost/api/admin/getUserList', { headers: {Authorization : 'Bearer ' + 'token' }})
      .then(res=> console.log(res))
  .catch(err=> console.log(err))
    }
  },
}
</script>

<style scoped>

</style>

后端API代码 #

const { response } = require("express");
const pool = require("../../config/database");

async function listUsers() {

    let sqlquery = `select
                        u.id, 
                        created_at,
                        email,
                        is_premium,
                        goal,
                        fitness_level,
                        profile_completed,
                        accepted_health_warning,
                        group_concat(r.name) as roles_list
                    from users u
                    left join user_role ur on ur.user_id = u.id
                    left join role r on r.id = ur.role_id
                    group by u.id;`
    return new Promise((resolve, reject) => {
        pool.query(sqlquery,
            (error, results) => {
                if (error) {
                    return reject(error)
                }
                return resolve(results)
            })
    })
}

module.exports.listUsers = listUsers;

解决步骤 #

• 调用数据加载方法：当前代码仅定义loadUsers方法但未执行，需在组件生命周期钩子中触发，比如在created钩子中调用：

  created() {
    this.loadUsers();
  }
  

• 将接口响应数据赋值给users数组：Axios的then回调仅打印响应，未更新组件数据，需修改为：

  .then(res=> {
    console.log(res);
    this.users = res.data; // 若后端响应包含外层data字段，需改为res.data.data
  })
  

• 替换固定Token为实际有效Token：代码中用固定字符串'token'，需替换为实际用户认证Token，比如从本地存储获取：

  const token = localStorage.getItem('authToken');
  axios.get('https://somehost/api/admin/getUserList', { 
    headers: {Authorization : `Bearer ${token}` }
  })
  

• 修正表头字段匹配：表头中User ID对应的value为'u.id'，但后端返回字段是id，需修改表头配置：

  {
    text: 'User ID',
    align: 'start',
    sortable: false,
    value: 'id', // 改为与后端返回字段一致
  }
  

• 排查跨域问题：若前端与后端域名不同，需确保后端配置CORS，允许前端域名访问，并且允许携带Authorization请求头，可使用cors npm包配置相关参数。
• 检查响应结构：在浏览器控制台查看Axios返回的res对象结构，确认数据所在层级，保证赋值路径正确。

内容的提问来源于stack exchange，提问作者Burak Saraç