Nuxt.js中使用Vue.js调用登录API时Token显示Undefined的问题求助

看起来你遇到的Token undefined问题，主要是代码里的几处逻辑错误导致的，我帮你梳理下问题点并给出修正方案：

问题分析 #

• 错误解析状态码：response.status本身就是数字类型的HTTP状态码（比如200），调用JSON.parse(response.status)完全没必要，甚至会因为传入非JSON格式的数字而触发错误，导致后续的token存储和路由跳转逻辑可能无法正常执行。
• Axios导入方式不合理：在按钮点击方法里每次都require('axios')会重复加载模块，应该在组件顶部统一导入。
• 未校验Token字段存在性：直接存储response.data.token前没有确认该字段是否存在，如果服务器返回的响应结构和预期不符，就会存入undefined。

修正后的代码 #

import axios from 'axios' // 顶部统一导入axios

export default {
    name: 'cont',
    data() {
        return {
            email: 'one@example.com',
            password: 'userone',
            error: null,
        };
    },
    methods: {
        async button() {
            try {
                const response = await axios.post('http://localhost:33000/login', {
                    email: this.email,
                    password: this.password,
                });
                
                // 先检查response.data中是否存在token字段
                if (response.data.token) {
                    localStorage.setItem("token", response.data.token);
                    console.log('存储的Token:', localStorage.getItem("token"));
                } else {
                    console.error('服务器返回数据中未包含Token');
                    this.error = '登录失败，未获取到授权Token';
                    return;
                }
                
                // HTTP状态码200是数字，直接判断即可
                if (response.status === 200) {
                    console.log('登录成功，响应数据:', response.data);
                    this.$router.push('/dashboard');
                }
            } catch(error) {
                if(error.response) {
                    console.log('错误响应数据:', error.response.data);
                    if(error.response.status === 400) {
                        this.error = true;
                    } else {
                        console.log('请求配置:', error.config);
                    }
                } else {
                    console.log('请求异常:', error.message);
                }
            }
        }
    }
}

额外建议 #

1. 打开浏览器的开发者工具 -> Network标签，查看登录请求的响应内容，确认服务器返回的data里确实包含token字段，格式是否符合预期（比如是否是{ "token": "xxx..." }）。
2. 可以给localStorage的操作做一层封装，避免直接使用原始API时出现拼写错误（比如把token写成Token）。
3. 生产环境中建议使用HttpOnly Cookie存储Token（如果服务器支持的话），比localStorage更安全。

内容的提问来源于stack exchange，提问作者prince jonathan Bolampembe bat