在 nuxt.js auth 中，用户始终重定向到登录

Question

我有一个带有@nuxt/auth 的 Nuxt 应用程序设置。 每当页面刷新时，用户总是被重定向到登录页面。 我猜客户端登录时 Nuxt 应用程序的服务器端没有登录。 JWT 访问令牌是从 Express API 获得的。 请问有人可以帮我解决这个问题吗？ 这是我的 nuxt.config.js

  auth: {
    redirect: {
      login: '/',
      logout: '/',
      home: '/dashboard',
    },
    resetOnError: true,
    rewriteRedirects: true,
    strategies: {
      local: {
        token: {
          property: 'data.accessToken',
        },
        user: {
          property: 'data[0]',
          autoFetch: false,
        },
        endpoints: {
          login: {
            url: '/api/v1/users/login',
            method: 'post',
          },
          logout: false,
          user: {
            url: '/api/v1/users',
            method: 'get',
            propertyName: false,
          },
        },
      },
    },
  },

还有我的dashboard.vue

export default {
  middleware: ['auth'],



};

Answer 1

这是我的工作nuxt.config.js

export default {
  router: {
    middleware: ['auth'],
  },
  modules: [
    '@nuxtjs/auth-next'
  ],
auth: {
  redirect: {
    login: '/login',
    home: '/',
    logout: '/login',
    callback: false, // not used here in our case
  },
  localStorage: false, // REALLY not secure, so nah
  resetOnError: true, // kick the user if any error happens w/ the auth
  strategies: {
    local: {
      scheme: 'refresh', // used for the refreshToken flow
      token: {
        property: 'access_token',
        maxAge: 3600, // only useful if not detected on the login
      },
      refreshToken: {
        property: 'refresh_token',
        data: 'refresh_token',
        maxAge: 60 * 60 * 24 * 30, // 1 month
      },
      clientId: process.env.IAM_CLIENT_ID, // our application's ID aka browser
      user: {
        property: 'employee',
        autoFetch: false, // no need to fetch the user, will be done in gql
      },
      endpoints: {
        login: { url: '/login', method: 'post' },
        refresh: { url: '/oauth/refresh', method: 'post' },
        user: false, // as told above, this one is not needed
        logout: { url: '/logout', method: 'get' },
      },
      tokenRequired: true,
      tokenType: 'JWT',
    },
  },
  plugins: [
    '~/plugins/nuxt-axios.js',
    { src: '~/plugins/nuxt-auth.js', mode: 'client' },
  ],
}

nuxt-auth.js是一个基本的记录器，以防出现错误

import $toast from '~/mixins/buefy-toast'

export default function ({ $auth }) {
  $auth.onError((_name, error) => {
    $toast.open({ message: error })
  })
}

另一个重要部分是我的登录流程（在表单提交时触发）

export default {
  methods: {
    async authMe() {
      const succesfulLogin = await this.$auth.loginWith('local', {
        data: {
          email: this.email,
          password: this.password,
        },
      })
      if (succesfulLogin) {
        await this.$auth.setUser({
          email: this.email,
          password: this.password,
        })
      }
    }
    // ...
  }
}

在进行身份验证时，我们基本上不会在 API 上获取用户，而是提交凭据并验证它们，然后使用 function $auth.setUser手动设置标志。 这是我处理将loggedIn标志传递给true的唯一部分，其余配置只是项目配置。
我们的 JWT 上也有一些refreshToken ，但你可以完全忽略这个。

Axios 配置文件基本上是设置我们应用程序所需的标头。

auth中间件是带有@nuxt/auth模块本身的，我自己没有写。 当使用target: 'static'生成时，这完全有效（cookies + vuex 状态）。