如何修复@nuxtjs/auth-next登录后个人主页刷新报错的问题

云原生阿岚

2026-10-5

问题根因

刷新报错是SSR渲染阶段$auth实例还未完成初始化，$auth.user为undefined，你在模板和data初始化阶段直接访问$auth.user下的属性直接触发了报错，和axios版本无关，所以降级axios没有效果。

修复步骤

给个人主页页面增加auth中间件，保证页面渲染前auth实例已经完成登录态校验
在页面<script>的导出配置中新增一行：

middleware: 'auth'

模板中所有访问$auth.user子属性的位置全部增加可选链防护，避免未初始化时访问报错：
原代码{{$auth.user.name}}修改为{{ $auth.user?.name }}，email、phone、lastLoginForHuman三处属性访问都做同样的修改。
调整form数据初始化逻辑，不要在data()阶段直接访问$auth.user，放到客户端挂载完成的mounted钩子中赋值：
修改后的script部分代码如下：

export default {
    name: "Profile",
    middleware: 'auth',
    data() {
        return {
            form: {
                firstName: '',
                lastName: '',
                email: '',
                phone: '',
            },
            photo: null,
        };
    },
    mounted() {
        if (this.$auth.user) {
            this.form = {
                firstName: this.$auth.user.firstName,
                lastName: this.$auth.user.lastName,
                email: this.$auth.user.email,
                phone: this.$auth.user.phone,
            }
        }
    }
};