1

Noob 身份验证和 nuxt auth cookie 策略有问题。

我的后端是golang，登录成功后设置cookie

    http.SetCookie(w, &http.Cookie{
        Name:     "session_token",
        Value:    sessionToken,
        Path:     "/",
        HttpOnly: true,
    })

看到 httpOnly 存在问题，但这并没有影响我的问题。

我目前的配置最少。

  auth: {
    strategies: {
      cookie: {
        endpoints: {
          login: { url: "/api/auth/login", method: "post" },
          logout: false, // will be implemented
          user: false,   // will be implemented
        },
      },
    },
  },

我的问题是我设置了会话cookie，这意味着它在浏览器关闭后未设置（至少我是这样理解的）。但似乎 nuxt 不在乎是否有 cookie。

登录工作正常 - 我明白了loggedIn: true。但是当cookie被删除（浏览器关闭后）我仍然登录。

如果ssr: true我也收到此错误： [Vue warn]: The client-side rendered virtual DOM tree is not matching server-rendered content. This is likely caused by incorrect HTML markup, for example nesting block-level elements inside <p>, or missing <tbody>. Bailing hydration and performing full client-side render.

和网站挂起。

当cookie不存在时，有没有办法注销用户？或者我应该重新考虑我的方法？

尝试了其他配置选项，例如token.required:true等。还使用前缀更改 cookie 令牌名称auth.。但似乎没有任何帮助。

编辑：这是我的身份验证代码：

<template>
  <div class="layout">
    <form @submit.prevent="userLogin">
      <div>
        <label>Email</label>
        <input type="email" v-model="login.email" />
      </div>
      <div>
        <label>Password</label>
        <input type="password" v-model="login.password" />
      </div>
      <div>
        <button type="submit">Submit</button>
      </div>
    </form>
  </div>
</template>

<script>
export default {
  data() {
    return {
      login: {
        email: "",
        password: "",
      },
    };
  },
  methods: {
    async userLogin() {
      try {
        let response = await this.$auth.loginWith("cookie", {
          data: this.login,
        });
        console.log(response);

        this.$router.push("secret");
      } catch (err) {
        console.log(err);
      }
    },
  },
};
</script>

在标题部分我有：

    ...
      <nuxt-link
        v-bind:class="{ active: routeName === 'secret' }"
        class="link"
        to="/secret"
        v-if="isAuthenticated"
        >Secret</nuxt-link
      >
    </nav>
    <div class="auth">
      <div v-if="isAuthenticated">
        <a class="link" @click="logout">Logout</a>
      </div>
      <div v-else>
        <nuxt-link
          v-bind:class="{ active: routeName === 'register' }"
          class="link"
          to="/register"
          >Register</nuxt-link
        >
        <nuxt-link class="button" to="/login">Login</nuxt-link>
      </div>
    </div>
   ...
   <script>
    import { mapGetters } from "vuex";

    export default {
    ...
    computed: {
    ...

    ...mapGetters(["isAuthenticated", "loggedInUser"]),
  },
};
</script>

第二次编辑：

更改了我的配置以尝试其他变体，并可能留下会话 cookie。

  auth: {
    // cookie: false,
    strategies: {
      local: {
        token: {
          // property: 'session_token',
          // global: true,
          required: false,
          type: false
        },
        endpoints: {
          login: { url: "/api/auth/login", method: "post" },
          logout: false,
          user: false,
        },
      },
    },
  },

The client-side rendered virtual DOM tree is not matching server-rendered content.但当我关闭并重新打开浏览器时，我仍然收到。v-if="$auth.loggedIn"请注意，仅当我有带有or的代码时才会出现这种情况v-if="isAuthenticated"。难道我做错了什么？如果我用<client-only>标签包装它，它会解决警告，但看起来像是一个黑客。

4

0 回答 0