I want to conditionally show my authentication modal based on whether a token exists in my Vuex store. It's very straightforward and I have this working almost 100%.
The part I've been spinning my wheels on is that when the token is present, I get a brief flash of the auth modal before the rest of the content is rendered. Ideally, the modal shouldn't render at all because !token is false.
Here's the relevant code:
// 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
}
},
//...
If I explicitly set <Auth :open="false" />, I do not get the modal flash.
