使用nuxt auth模块检测身份验证状态需要刷新

Question

我的应用无法检测到用户登录而没有完全刷新页面时发生的状态更改。刷新后，所有内容都会正确显示。我正在使用Nuxt及其包含的身份验证模块-https://auth.nuxtjs.org/。

这是无法检测状态变化的v-if语句：

  <template v-if="$auth.$state.loggedIn">
    <nuxt-link
      to="/profile"
    >
      Hello, {{ $auth.$state.user.name }}
    </nuxt-link>
  </template>
  <template v-else>
    <nuxt-link
      to="/logIn"
    >
      Sign In
    </nuxt-link>
  </template>

这是我的登录页面中的登录方法。

  methods: {
    async onLogin() {
      try{

        this.$auth.loginWith("local", {
          data: {
            email: this.email,
            password: this.password
          }
        });

        this.$router.push("/");

      }catch(err){
        console.log(err);
      }

    }
  }

我尝试通过计算属性获取状态，但得到相同的结果。我可以在Chrome Dev Tools的“应用程序”标签中看到vuex存储数据发生更改，以指示我已正确登录/注销，但Vue Dev似乎一直在指示我已登录。。 。

注销时，我也遇到同样的问题。方法如下：

async onLogout() {
  try{
    await this.$auth.logout();
  }catch(err){
    console.log(err);
  }
}

我很乐意提供更多详细信息。

Answer 1

1. 在store/index.js中添加此：

    export const getters = {
      isAuthenticated(state) {
      return state.auth.loggedIn
     },
      loggedInUser(state) {
      return state.auth.user
     },
   };
   

2. 在您认为要通过身份验证的页面中

   • 使用中间件身份验证为：middleware: 'auth'
   • 使用import { mapGetters } from 'vuex'
   • 计算出的加...mapGetters(['isAuthenticated', 'loggedInUser']),

3. 您可以使用loggingInUser来获取您的用户详细信息或检查是否经过isAuthenticated

并且只要您在计算出的位置导入地图获取器，注销就可以按预期工作

Answer 2

有时Vue的反应性系统不够完善，您只需要手动触发重新渲染，而最简单的方法是将函数逻辑包装在setTimeout()中>

setTimeout(async () => {
   await this.$auth.logout();
}, 0);