如何解决重定向问题？

Question

我正在 nuxt 上设置一个新项目，并且我为登录页面制作了一个新布局，并创建了一个页面 login。 在我的 default 布局中，我正在设置 middleware: 'auth'，在我的中间件中，我正在检查令牌，如果未通过身份验证，我会将用户重定向到登录页面。

有趣的是，当我刚刚设置它时，它运行良好，但过了一段时间（我试图用我的代码返回以查找问题）我开始收到错误Redirected when going from "/" to "/login" via a navigation guard.

除了auth 中间件中的重定向之外，我没有任何重定向。

这里有什么我看不到的问题？

// middleware/auth.js

export default ({ app, error, redirect }) => {
    const hasToken = !!app.$apolloHelpers.getToken()
    if (!hasToken) {
        error({
            errorCode: 503,
            message: 'You are not allowed to see this'
        })
        return redirect('/login')
    }
}

// layouts/default.vue

<template>
  <v-app dark>
    <v-navigation-drawer
      v-model="drawer"
      :mini-variant="miniVariant"
      :clipped="clipped"
      fixed
      app
    >
      <v-list>
        <v-list-item
          v-for="(item, i) in items"
          :key="i"
          :to="item.to"
          router
          exact
        >
          <v-list-item-action>
            <v-icon>{{ item.icon }}</v-icon>
          </v-list-item-action>
          <v-list-item-content>
            <v-list-item-title v-text="item.title" />
          </v-list-item-content>
        </v-list-item>
      </v-list>

    </v-navigation-drawer>
    <v-app-bar :clipped-left="clipped" fixed app>
      <v-app-bar-nav-icon @click.stop="drawer = !drawer" />
 
      <v-btn icon @click.stop="clipped = !clipped">
        <v-icon>mdi-application</v-icon>
      </v-btn>
 
      <v-toolbar-title v-text="title" />
      <v-spacer />
 
    </v-app-bar>
    <v-main>
      <v-container>
        <nuxt />
      </v-container>
    </v-main>

    <v-footer :absolute="!fixed" app>
      <span>&copy; {{ new Date().getFullYear() }}</span>
    </v-footer>
  </v-app>
</template>

<script>
export default {
  middleware: ['auth'],
  data() {
    return {
      clipped: false,
      drawer: true,
      fixed: true,
      items: [
        {
          icon: 'mdi-apps',
          title: 'Welcome',
          to: '/',
        },
        {
          icon: 'mdi-account-group-outline',
          title: 'Clients',
          to: '/clients',
        },
        {
          icon: 'mdi-briefcase-check-outline',
          title: 'Orders',
          to: '/orders',
        },
        {
          icon: 'mdi-briefcase-clock-outline',
          title: 'Pending Orders',
          to: '/pending-orders',
        },
      ],
      miniVariant: false,
      right: true,
      rightDrawer: false,
      title: 'Title',
    }
  },
}
</script>

// layouts/login.vue

<template>
  <v-app dark>
    <v-main>
      <v-container>
        <nuxt />
      </v-container>
    </v-main>
  </v-app>
</template>

<script>
export default { }
</script>

// pages/login.vue

<template>
  <div>test login</div>
</template>

<script>
export default {

}
</script>

<style>

</style>

Answer 1

抱歉）显然我从登录页面组件中删除了layout 属性