Nuxt/Vue中Vuex属性未定义时页面重定向失效问题

我来帮你拆解并解决这两个核心问题：

一、为什么直接访问账户页会报错？ #

这是因为Nuxt是服务端渲染（SSR）框架，页面模板的渲染会优先于客户端的created钩子执行。当你直接访问myurl/account时，服务端会先尝试渲染模板里的accountheader组件，但此时Vuex中没有用户数据，user是undefined，子组件接收undefined的user后尝试访问其属性自然会抛出“无法读取未定义属性x”的错误。

另外，你在created里的路由跳转不生效，是因为服务端环境中无法通过this.$router.push直接触发浏览器路由跳转——服务端没有浏览器的window对象，这个方法只在客户端环境有效。而且服务端渲染时，模板已经开始渲染了，即便你在created里判断，也已经晚了一步。

二、正确的解决方案 #

1. 用Nuxt中间件做权限校验（推荐） #

Nuxt的中间件（Middleware）会在页面渲染之前执行，无论是服务端还是客户端，能完美解决未登录用户直接访问受保护页面的问题。

步骤1：创建权限中间件

在项目根目录的middleware文件夹下新建auth.js（如果没有middleware文件夹就新建一个）：

export default function ({ store, redirect }) {
  // 检查Vuex中user模块的user是否存在
  if (!store.state.user.user) {
    // 未登录则重定向到登录页
    return redirect('/login')
  }
}

步骤2：在账户页中使用该中间件

修改你的账户页代码，在组件配置中添加middleware字段：

<template>
  <v-container fluid class="px-0 py-0 mt-12">
    <v-row>
      <accountheader :user="user" :company="company" />
    </v-row>
  </v-container>
</template>

<script>
import { mapState } from "vuex";

export default {
  transitions: "page",
  // 新增：使用auth中间件
  middleware: 'auth',
  computed: {
    ...mapState("user", {
      company: (state) => state.company,
      user: (state) => state.user,
    }),
  },
  head: {
    title: "ACCOUNT",
    meta: [
      {
        hid: "description",
        name: "description",
        content: "account page",
      },
    ],
  },
  // 可以移除原来的created钩子了
  // created() {
  //   if (this.user === undefined) {
  //     this.$router.push("/login");
  //   }
  // },
};
</script>

<style></style>

2. 额外的安全保障：模板层面的防御 #

为了避免极端情况（比如中间件校验失效），可以在模板中添加v-if确保user存在时再渲染子组件：

<template>
  <v-container fluid class="px-0 py-0 mt-12">
    <v-row v-if="user">
      <accountheader :user="user" :company="company" />
    </v-row>
    <!-- 可选：可以加一个加载提示或者未登录提示 -->
    <v-row v-else>
      <span>正在跳转至登录页...</span>
    </v-row>
  </v-container>
</template>

或者在子组件accountheader中给user和company设置默认值，或者使用可选链操作符（比如user?.name）来避免访问undefined属性的错误。

三、关于created钩子仅在服务端打印日志的解释 #

Nuxt的created钩子会在服务端和客户端各执行一次：

• 服务端执行时，日志会输出在Node.js的控制台里，而不是Chrome的开发者工具。
• 客户端执行时，才会在Chrome控制台输出。
  但因为你之前的代码在服务端渲染时已经触发了模板报错，页面可能还没走到客户端的created钩子就崩溃了，所以你看不到客户端的日志。用中间件后，未登录用户会被提前重定向，就不会出现这个问题了。

内容的提问来源于stack exchange，提问作者Chris S