*Nuxt JS Auth* 为啥在模板部分使用 loginWith 成功登录后 auth.loggedIn 为真，但在中间件文件中为假？

Posted 2023-02-22

【中文标题】*Nuxt JS Auth* 为啥在模板部分使用 loginWith 成功登录后 auth.loggedIn 为真，但在中间件文件中为假？

【英文标题】：*Nuxt JS Auth* Why after success login with loginWith in template sections auth.loggedIn is true, but in middleware file is false?*Nuxt JS Auth* 为什么在模板部分使用 loginWith 成功登录后 auth.loggedIn 为真，但在中间件文件中为假？

【发布时间】：2020-05-28 11:56:57

【问题描述】：

我刚开始学习 NuxtJS，我想通过 auth 模块为 Nuxt 实现身份验证。 我不知道为什么，但是使用 loginWith 登录似乎可以工作，在 vue 文件上我可以获取有关已登录用户的数据，并且 loggedIn 变量具有真实值。但是我注意到当我从 auth 模块设置中间件时，即使我已经登录，服务器总是重定向到登录端点。我看到我可以制作我的中间件文件，但是loginIn 的值为false，所以我无法正确重定向。

index.vue

<template>
    <div id="main-page">
        <panel />
    </div>
</template>

<script>
import panel from "~/components/Panel.vue"


export default 
    middleware: ['authenticated'],
    'components': 
        panel
    ,

;
</script>

我的登录组件：

<template>
    <div id="form-wrapper">
        <b-form-group 
            class="ml-3 mr-5"
            label="Username"
            label-for="id-username"
            :invalid-feedback="invalidFeedback"
            :state='state'
        >
            <b-form-input id="id-username" v-model="username" type="text" placeholder="elo"></b-form-input>        
        </b-form-group>
        <b-form-group 
            class="ml-3 mr-5"
            label="Password"
            label-for="id-password"
            :invalid-feedback="invalidFeedbackPass"
            :state='statePass'
        >
            <b-form-input id="id-password" v-model="password" type="password"></b-form-input>        
        </b-form-group>
        <b-button v-b-modal.login-modal class="ml-3 mr-5" variant="outline-success">Login</b-button>
<div v-if="$auth.loggedIn"> $auth.loggedIn </div> // here is true after login

        <b-modal ref="login-modal" id="login-modal" hide-footer hide-header>
            <p>Login:  username  Hasło:  password </p>
            <b-button @click="loginUser(username, password)">Send</b-button>
        </b-modal>
    </div>    
</template>

<script>
import "bootstrap-vue"
import axios from "axios"

export default 
    name: "loginForm",
    data() 
        return
            username: '',
            password: '',
        
    ,
    props: 

    ,
    methods: 
        async loginUser(loginInfo)
            try 
                await this.$auth.loginWith('local', 
                    data: loginInfo
                );
             catch (e) 
                this.$router.push('/');
            
        

    ,
...
</script>

nuxt.config.js 用于身份验证

auth: 
    strategies: 
      local: 
        endpoints: 
          login:  url: '/auth/token/login/', method: 'post', propertyName: 'auth_token' ,
          logout:  url: '/auth/token/logout/', method: 'post' ,
          user:  url: '/auth/users/me/', method: 'get', propertyName: false 
        ,
        tokenRequired: true,
        tokenType: 'Token',
        tokenName: 'Authorization'
      
    ,

    redirect: 
      login: "/",
      logout: "/",
      home: "/home"
    ,

  ,

中间件中的autenticated.js

export default function ( store, redirect ) 
  console.log(store.state.auth.loggedIn); // here returns false, even after success login
  if (store.state.auth.loggedIn) 
    return redirect('/home')
  

值得一提的是，它在 docker 上运行。也许这是个问题。

更新 我将 nuxt 模式从 s-s-r 更改为 SPA，现在一切都可以从 nuxt auth 模块运行。

但我想在 s-s-r 上工作，所以如果有人有解决方案，请分享。

【问题讨论】：

我找到了解决问题的方法。我将模式从 s-s-r 更改为 SPA，现在重定向工作正常。但我认为 s-s-r 模式比 SPA 更好，所以如果有人找到解决方案，请分享。

您是否检查过答案，例如在线程中：github.com/nuxt-community/auth-module/issues/55？

@Michal_Szulc 是的，我检查了这个。我也不将 ENV 的变量用于 axios。现在，当我还在学习 nuxt 时，我为 axios 硬编码了 baseURL。

我读了很多关于这个的帖子，很多人都有同样的问题。但没有人能解释为什么会发生这种情况。目前，当我将模式更改为 SPA 时，一切正常，但对于更大的项目，它可能会对性能和 CEO 产生影响。

【参考方案1】：

我的 nuxt.config.js 也是：

auth: 
 strategies: 
  local: 
    endpoints: 
      login:  url: '/api/login', method: 'post' ,
      logout: false,
      user: false,
    ,
    tokenRequired: true,
  ,
,
rewriteRedirects: false,

 redirect: 
  login: '/login',
  logout: '/login',
  home: '/dashboard',
,

【参考方案2】：

好吧，我找不到比将 nuxt 的模式更改为 SPA 更好的解决方案。在 SPA 中，一切正常，应该如何。这是我用于身份验证模块的 nuxt.conf.js 片段。

export default
  mode: 'spa',

  modules: [
    '@nuxtjs/axios',
    '@nuxtjs/auth'
  ],

  axios: 
    baseURL: 'http://127.0.0.1:8000/api',
    browserBaseURL: 'http://127.0.0.1:8000/api'
  ,

  auth: 

    strategies: 
      local: 
        endpoints: 
          login:  url: '/auth/token/login/', method: 'post', propertyName: 'auth_token' ,
          logout:  url: '/auth/token/logout/', method: 'post' ,
          user:  url: '/auth/users/me/', method: 'get', propertyName: false 
        ,
        tokenRequired: true,
        tokenType: 'Token',
        tokenName: 'Authorization'
      
    ,
    rewriteRedirects: false,

    redirect: 
      login: "/login",
      logout: "/login",
      home: "/",
    ,
  ,

  router : 
    middleware: ['auth'],
  

【讨论】：

嗯，这并没有解决我的问题，但给了我问题所在的提示。我再次将其更改为spa 到universal，我的错误在于登录后的用户请求。我在endpoints 部分中有user: url: '/auth/users/me/', method: 'get', propertyName: 'user' 并将其更改为false，就像你做的那样。我注意到您的解决方案有rewriteRedirects: false,，但使用它可以防止我需要重定向到我的“家”路径。

半天后我放弃并添加了选项 s-s-r: false。 mode: spa 现在已经贬值了，但是如果没有 firebase，srr auth 模块集成可能是不可能的......