fix the login
This commit is contained in:
parent
d49a65e88d
commit
000139b9ae
|
@ -9,28 +9,7 @@ import TheHeader from './components/nav/TheHeader.vue';
|
||||||
export default {
|
export default {
|
||||||
components: {
|
components: {
|
||||||
TheHeader
|
TheHeader
|
||||||
},
|
}
|
||||||
data() {
|
|
||||||
return {
|
|
||||||
isLoggedIn: false,
|
|
||||||
cart: { items: [], total: 0, qty: 0 },
|
|
||||||
};
|
|
||||||
},
|
|
||||||
provide() {
|
|
||||||
return {
|
|
||||||
isLoggedIn: this.isLoggedIn,
|
|
||||||
login: this.login,
|
|
||||||
logout: this.logout,
|
|
||||||
};
|
|
||||||
},
|
|
||||||
methods: {
|
|
||||||
login() {
|
|
||||||
this.isLoggedIn = true;
|
|
||||||
},
|
|
||||||
logout() {
|
|
||||||
this.isLoggedIn = false;
|
|
||||||
},
|
|
||||||
},
|
|
||||||
};
|
};
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
|
|
|
@ -12,24 +12,28 @@
|
||||||
<router-link to="/cart">Cart</router-link>
|
<router-link to="/cart">Cart</router-link>
|
||||||
<base-badge mode="elegant">{{ quantity }}</base-badge>
|
<base-badge mode="elegant">{{ quantity }}</base-badge>
|
||||||
</li>
|
</li>
|
||||||
<li v-if="isLoggedIn">
|
<li v-if="isAuthenticated">
|
||||||
<router-link to="/admin">Admin</router-link>
|
<router-link to="/admin">Admin</router-link>
|
||||||
</li>
|
</li>
|
||||||
</ul>
|
</ul>
|
||||||
</nav>
|
</nav>
|
||||||
<div>
|
<div>
|
||||||
<button v-if="!isLoggedIn" @click="login">Login</button>
|
<button v-if="!isAuthenticated" @click="login">Login</button>
|
||||||
<button v-if="isLoggedIn" @click="logout">Logout</button>
|
<button v-if="isAuthenticated" @click="logout">Logout</button>
|
||||||
</div>
|
</div>
|
||||||
</header>
|
</header>
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
<script>
|
<script>
|
||||||
|
import { mapActions } from 'vuex';
|
||||||
import { mapGetters } from 'vuex';
|
import { mapGetters } from 'vuex';
|
||||||
export default {
|
export default {
|
||||||
inject: ['isLoggedIn', 'login', 'logout'],
|
|
||||||
computed: {
|
computed: {
|
||||||
...mapGetters('cart', ['quantity'])
|
...mapGetters('cart', ['quantity']),
|
||||||
|
...mapGetters('auth', ['isAuthenticated'])
|
||||||
|
},
|
||||||
|
methods: {
|
||||||
|
...mapActions('auth', ['login', 'logout'])
|
||||||
}
|
}
|
||||||
};
|
};
|
||||||
</script>
|
</script>
|
||||||
|
|
|
@ -1,10 +1,12 @@
|
||||||
import { createStore } from 'vuex';
|
import { createStore } from 'vuex';
|
||||||
|
|
||||||
|
import authModule from './modules/auth/index.js';
|
||||||
import cartModule from './modules/cart/index.js';
|
import cartModule from './modules/cart/index.js';
|
||||||
import productsModule from './modules/products/index.js';
|
import productsModule from './modules/products/index.js';
|
||||||
|
|
||||||
const store = createStore({
|
const store = createStore({
|
||||||
modules: {
|
modules: {
|
||||||
|
auth: authModule,
|
||||||
cart: cartModule,
|
cart: cartModule,
|
||||||
products: productsModule
|
products: productsModule
|
||||||
},
|
},
|
||||||
|
|
|
@ -0,0 +1,8 @@
|
||||||
|
export default {
|
||||||
|
logout(context) {
|
||||||
|
context.commit('logout');
|
||||||
|
},
|
||||||
|
login(context) {
|
||||||
|
context.commit('login');
|
||||||
|
}
|
||||||
|
};
|
|
@ -0,0 +1,5 @@
|
||||||
|
export default {
|
||||||
|
isAuthenticated(state) {
|
||||||
|
return state.isLoggedIn;
|
||||||
|
}
|
||||||
|
};
|
|
@ -0,0 +1,15 @@
|
||||||
|
import authActions from './actions.js';
|
||||||
|
import authGetters from './getters.js';
|
||||||
|
import authMutations from './mutations.js';
|
||||||
|
|
||||||
|
export default {
|
||||||
|
namespaced: true,
|
||||||
|
state() {
|
||||||
|
return {
|
||||||
|
isLoggedIn: false
|
||||||
|
};
|
||||||
|
},
|
||||||
|
actions: authActions,
|
||||||
|
getters: authGetters,
|
||||||
|
mutations: authMutations
|
||||||
|
};
|
|
@ -0,0 +1,8 @@
|
||||||
|
export default {
|
||||||
|
login(state) {
|
||||||
|
state.isLoggedIn = true;
|
||||||
|
},
|
||||||
|
logout(state) {
|
||||||
|
state.isLoggedIn = false;
|
||||||
|
}
|
||||||
|
};
|
Reference in New Issue