Browse Source

Added Pinia account state tracking. Also modified router to go to Start if no account is defined.

kb/add-usage-guide
Matthew Aaron Raymer 2 years ago
parent
commit
5c14275a75
  1. 4
      src/main.ts
  2. 11
      src/router/index.ts
  3. 17
      src/store/account.ts
  4. 9
      src/store/index.ts

4
src/main.ts

@ -3,8 +3,7 @@ import { createApp } from "vue";
import App from "./App.vue";
import "./registerServiceWorker";
import router from "./router";
import store from "./store";
import { useAccountStore } from "./store/account";
import "./assets/styles/tailwind.css";
import { library } from "@fortawesome/fontawesome-svg-core";
@ -50,7 +49,6 @@ import { FontAwesomeIcon } from "@fortawesome/vue-fontawesome";
createApp(App)
.component("fa", FontAwesomeIcon)
.use(store)
.use(createPinia())
.use(router)
.mount("#app");

11
src/router/index.ts

@ -1,4 +1,5 @@
import { createRouter, createWebHistory, RouteRecordRaw } from "vue-router";
import { useAccountStore } from "../store/account";
import HomeView from "../views/HomeView.vue";
const routes: Array<RouteRecordRaw> = [
@ -109,4 +110,14 @@ const router = createRouter({
routes,
});
router.beforeEach(async (to) => {
// redirect to start page if no account
const publicPages = ["/start"];
const authRequired = !publicPages.includes(to.path);
const authStore = useAccountStore();
if (authRequired && !authStore.account) {
return "/start";
}
});
export default router;

17
src/store/account.ts

@ -4,16 +4,19 @@ import { defineStore } from "pinia";
export const useAccountStore = defineStore({
id: "account",
state: () => ({
firstName: "",
lastName: "",
account: JSON.parse(
typeof localStorage["account"] == "undefined"
? null
: localStorage["account"]
),
}),
getters: {
firstName: (state) => state.account.firstName,
lastName: (state) => state.account.lastName,
},
actions: {
reset() {
this.$patch({
firstName: "",
lastName: "",
});
localStorage.removeItem("account");
},
},
});

9
src/store/index.ts

@ -1,9 +0,0 @@
import { createStore } from "vuex";
export default createStore({
state: {},
getters: {},
mutations: {},
actions: {},
modules: {},
});
Loading…
Cancel
Save