Question

我想根据我的Vuex存储中是否存在令牌有条件地显示我的身份验证模式。这非常简单，我的工作量几乎达到了100％。

我一直在努力的部分是，当存在令牌时，在呈现其余内容之前，我会简要了解一下auth模态。理想情况下，模态根本不应该呈现，因为!token为假。

以下是相关代码：

// layouts/default
<template>
  <div v-if="!loading">
    <Nav :token="token"/>
    <div class="ui container" v-if="token">
      <nuxt/>
    </div>
    <Auth :open="!token"/>
  </div>
</template>

<script>
import { mapState } from "vuex";
import Auth from "@/components/Auth";
import Nav from "@/components/Nav";
export default {
  computed: mapState({
    token: state => state.auth.token,
    loading: state => state.auth === "loading"
  }),
  components: {
    Nav,
    Auth
  },
  beforeCreate() {
    this.$store.dispatch("auth/checkLocalAuth");
  }
};
</script>

// store/auth.js

const store = require("store");

export const state = {
  token: store.get("userToken") || "",
  status: "loading"
};
export const getters = {
  isAuthenticated: state => state.token,
  authStatus: state => state.status
};
export const mutations = {
  // ..
  success: (state, token) => {
    state.status = "success";
    state.token = token;
  },
  //...
};

export const actions = {
  checkLocalAuth: ({ commit }) => {
    const token = store.get("userToken") || "";
    commit("success", token);
  },
  //...
...

// components/Auth.vue
<template>
  <div>
    <sui-modal v-model="open">
    //...
  </div>
</template>

<script>
export default {
  props: {
    open: {
      default: false
    }
  },
  //...

如果我明确设置了<Auth :open="false" />，则不会得到模态闪光。

Answer 1

如果token = ""，则!token不是false，而是true。因此，这可能是导致问题的原因。

Answer 2

知道了。该问题与ssr相关。一旦禁用ssr，就可以了。

如果我们确实需要ssr，这不是100％正确的解决方案，但目前不是必需的。将成为一个将解决！

根据Vuex状态有条件地渲染模态

2 个答案: