From 286605695b101c03dcac1f17fb9aa347221f585d Mon Sep 17 00:00:00 2001 From: joan Date: Tue, 8 Mar 2022 16:55:37 +0100 Subject: [PATCH] Added useSession and useState composables and remove vuex --- package-lock.json | 23 +----- package.json | 4 +- src/components/Topbar.vue | 26 ++----- src/components/UserPanel.vue | 39 ++++------ src/core/composables/{role.ts => useRole.ts} | 2 +- src/core/composables/useSession.ts | 57 +++++++++++++++ src/core/composables/useState.ts | 43 +++++++++++ src/main.ts | 6 +- src/router/index.ts | 7 +- src/shims-vuex.d.ts | 8 -- src/store/index.ts | 77 -------------------- src/views/Login/Login.vue | 8 +- 12 files changed, 135 insertions(+), 165 deletions(-) rename src/core/composables/{role.ts => useRole.ts} (91%) create mode 100644 src/core/composables/useSession.ts create mode 100644 src/core/composables/useState.ts delete mode 100644 src/shims-vuex.d.ts delete mode 100644 src/store/index.ts diff --git a/package-lock.json b/package-lock.json index 752052c06..92f96cf59 100644 --- a/package-lock.json +++ b/package-lock.json @@ -14,8 +14,7 @@ "quasar": "^2.0.0", "vue": "^3.0.0", "vue-i18n": "^9.1.0", - "vue-router": "^4.0.0-0", - "vuex": "^4.0.0-0" + "vue-router": "^4.0.0-0" }, "devDependencies": { "@intlify/vue-i18n-loader": "^3.0.0", @@ -28,7 +27,6 @@ "@vue/cli-plugin-router": "~4.5.15", "@vue/cli-plugin-typescript": "~4.5.15", "@vue/cli-plugin-unit-jest": "~4.5.15", - "@vue/cli-plugin-vuex": "~4.5.15", "@vue/cli-service": "~4.5.15", "@vue/compiler-sfc": "^3.0.0", "@vue/eslint-config-prettier": "^6.0.0", @@ -19872,17 +19870,6 @@ "integrity": "sha512-4gDntzrifFnCEvyoO8PqyJDmguXgVPxKiIxrBKjIowvL9l+N66196+72XVYR8BBf1Uv1Fgt3bGevJ+sEmxfZzw==", "dev": true }, - "node_modules/vuex": { - "version": "4.0.2", - "resolved": "https://registry.npmmirror.com/vuex/-/vuex-4.0.2.tgz", - "integrity": "sha512-M6r8uxELjZIK8kTKDGgZTYX/ahzblnzC4isU1tpmEuOIIKmV+TRdc+H4s8ds2NuZ7wpUTdGRzJRtoj+lI+pc0Q==", - "dependencies": { - "@vue/devtools-api": "^6.0.0-beta.11" - }, - "peerDependencies": { - "vue": "^3.0.2" - } - }, "node_modules/w3c-hr-time": { "version": "1.0.2", "resolved": "https://registry.npmmirror.com/w3c-hr-time/-/w3c-hr-time-1.0.2.tgz", @@ -37470,14 +37457,6 @@ "integrity": "sha512-4gDntzrifFnCEvyoO8PqyJDmguXgVPxKiIxrBKjIowvL9l+N66196+72XVYR8BBf1Uv1Fgt3bGevJ+sEmxfZzw==", "dev": true }, - "vuex": { - "version": "4.0.2", - "resolved": "https://registry.npmmirror.com/vuex/-/vuex-4.0.2.tgz", - "integrity": "sha512-M6r8uxELjZIK8kTKDGgZTYX/ahzblnzC4isU1tpmEuOIIKmV+TRdc+H4s8ds2NuZ7wpUTdGRzJRtoj+lI+pc0Q==", - "requires": { - "@vue/devtools-api": "^6.0.0-beta.11" - } - }, "w3c-hr-time": { "version": "1.0.2", "resolved": "https://registry.npmmirror.com/w3c-hr-time/-/w3c-hr-time-1.0.2.tgz", diff --git a/package.json b/package.json index e76479171..42a4218d0 100644 --- a/package.json +++ b/package.json @@ -17,8 +17,7 @@ "quasar": "^2.0.0", "vue": "^3.0.0", "vue-i18n": "^9.1.0", - "vue-router": "^4.0.0-0", - "vuex": "^4.0.0-0" + "vue-router": "^4.0.0-0" }, "devDependencies": { "@intlify/vue-i18n-loader": "^3.0.0", @@ -31,7 +30,6 @@ "@vue/cli-plugin-router": "~4.5.15", "@vue/cli-plugin-typescript": "~4.5.15", "@vue/cli-plugin-unit-jest": "~4.5.15", - "@vue/cli-plugin-vuex": "~4.5.15", "@vue/cli-service": "~4.5.15", "@vue/compiler-sfc": "^3.0.0", "@vue/eslint-config-prettier": "^6.0.0", diff --git a/src/components/Topbar.vue b/src/components/Topbar.vue index 9a07e3111..33c511072 100644 --- a/src/components/Topbar.vue +++ b/src/components/Topbar.vue @@ -27,7 +27,7 @@ @@ -41,24 +41,12 @@ diff --git a/src/components/UserPanel.vue b/src/components/UserPanel.vue index 9c5fbb4b7..b89226c56 100644 --- a/src/components/UserPanel.vue +++ b/src/components/UserPanel.vue @@ -21,7 +21,7 @@
@@ -40,23 +40,19 @@ diff --git a/src/core/composables/role.ts b/src/core/composables/useRole.ts similarity index 91% rename from src/core/composables/role.ts rename to src/core/composables/useRole.ts index 367b23b81..6ce950f7a 100644 --- a/src/core/composables/role.ts +++ b/src/core/composables/useRole.ts @@ -1,6 +1,6 @@ import store from '@/store'; -export function Role() { +export function useRole() { function hasAny(roles: string[]): boolean { const roleStore: string[] = store.state.roles; diff --git a/src/core/composables/useSession.ts b/src/core/composables/useSession.ts new file mode 100644 index 000000000..67533e398 --- /dev/null +++ b/src/core/composables/useSession.ts @@ -0,0 +1,57 @@ +import { useState } from './useState'; + +interface Session { + token: string; + keepLogin: boolean; +} + +interface useSession { + getToken: () => string; + setToken: (data: Session) => void; + destroy: () => void; + isLoggedIn: () => boolean; +} + +export function useSession(): useSession { + function getToken(): string { + const localToken = localStorage.getItem('token'); + const sessionToken = sessionStorage.getItem('token'); + + return localToken || sessionToken || ''; + } + + function setToken(data: Session): void { + if (data.keepLogin) { + localStorage.setItem('token', data.token); + } else { + sessionStorage.setItem('token', data.token); + } + } + + function destroy(): void { + localStorage.removeItem('token'); + sessionStorage.getItem('token'); + + const { setUser } = useState(); + + setUser({ + id: 0, + username: '', + nickname: '', + }); + } + + function isLoggedIn() { + const localToken = localStorage.getItem('token'); + const sessionToken = sessionStorage.getItem('token'); + + return !!(localToken || sessionToken); + } + + return { + getToken, + setToken, + destroy, + isLoggedIn, + }; +} diff --git a/src/core/composables/useState.ts b/src/core/composables/useState.ts new file mode 100644 index 000000000..13c46e4a1 --- /dev/null +++ b/src/core/composables/useState.ts @@ -0,0 +1,43 @@ +import { ref, Ref, computed, ComputedRef } from 'vue'; + +interface User { + id: number; + username: string; + nickname: string; +} + +const user: Ref = ref({ + id: 0, + username: '', + nickname: '', +}); + +const roles = ref([]); + +export function useState() { + function setUser(data: User): void { + user.value = { + id: data.id, + username: data.username, + nickname: data.nickname, + }; + } + + const getUser: ComputedRef = computed(() => { + return { + id: user.value.id, + username: user.value.username, + nickname: user.value.nickname, + }; + }); + + /* function setRoles(data) { + roles.value = data; + } */ + + return { + roles, + getUser, + setUser, + }; +} diff --git a/src/main.ts b/src/main.ts index c1220c775..05f02ccc7 100644 --- a/src/main.ts +++ b/src/main.ts @@ -1,15 +1,11 @@ import { createApp } from 'vue'; import App from './App.vue'; import router from './router'; -import store from './store'; import { Quasar } from 'quasar'; import quasarUserOptions from './quasar-user-options'; import i18n from './i18n'; -import filters from './core/filters'; -const app = createApp(App).use(i18n).use(Quasar, quasarUserOptions).use(store).use(router); - -app.config.globalProperties.$filters = filters; +const app = createApp(App).use(i18n).use(Quasar, quasarUserOptions).use(router); app.mount('#app'); diff --git a/src/router/index.ts b/src/router/index.ts index 623a955c9..8183413d5 100644 --- a/src/router/index.ts +++ b/src/router/index.ts @@ -1,5 +1,5 @@ import { createRouter, createWebHistory, RouteRecordRaw } from 'vue-router'; -import store from '../store'; +import { useSession } from '@/core/composables/useSession'; const routes: Array = [ { @@ -38,9 +38,10 @@ const router = createRouter({ }); router.beforeEach((to, from, next) => { - const loggedIn = store.getters.isLoggedIn; + const session = useSession(); + const { isLoggedIn } = session; - if (to.name !== 'Login' && !loggedIn) { + if (!isLoggedIn && to.name !== 'Login') { next({ path: '/login', query: { redirect: to.fullPath } }); } else { next(); diff --git a/src/shims-vuex.d.ts b/src/shims-vuex.d.ts deleted file mode 100644 index e41a634c0..000000000 --- a/src/shims-vuex.d.ts +++ /dev/null @@ -1,8 +0,0 @@ -import { Store } from '@/store'; // path to store file - -declare module '@vue/runtime-core' { - interface ComponentCustomProperties { - $store: Store; - $filters: Record; - } -} diff --git a/src/store/index.ts b/src/store/index.ts deleted file mode 100644 index 603cf39b0..000000000 --- a/src/store/index.ts +++ /dev/null @@ -1,77 +0,0 @@ -import { createStore } from 'vuex'; - -interface UserProfile { - id: number; - username: string; - nickname: string; - token: string; -} - -interface Role { - id: number; - name: string; -} - -interface UserRole { - id: number; - role: Role; -} - -export default createStore({ - state: { - user: {}, - roles: [], - }, - mutations: { - setUser(state, data) { - const user: UserProfile = { - id: data.id, - username: data.name, - nickname: data.nickname, - token: data.token, - }; - - state.user = user; - }, - setRoles(state, data) { - const roles = data.map((userRole: UserRole) => userRole.role.name); - state.roles = roles; - }, - }, - actions: { - logIn({ commit }, data) { - if (data.keepLogin) { - localStorage.setItem('token', data.token); - } else { - sessionStorage.setItem('token', data.token); - } - - commit('setUser', data); - }, - logOut({ commit }) { - localStorage.removeItem('token'); - sessionStorage.getItem('token'); - - commit('setUser', {}); - }, - updateUserData({ commit }, data) { - commit('setUser', data.user); - commit('setRoles', data.roles); - }, - }, - getters: { - isLoggedIn() { - const localToken = localStorage.getItem('token'); - const sessionToken = sessionStorage.getItem('token'); - - return !!(localToken || sessionToken); - }, - token() { - const localToken = localStorage.getItem('token'); - const sessionToken = sessionStorage.getItem('token'); - - return localToken || sessionToken; - }, - }, - modules: {}, -}); diff --git a/src/views/Login/Login.vue b/src/views/Login/Login.vue index 61991fb49..edec8b4b3 100644 --- a/src/views/Login/Login.vue +++ b/src/views/Login/Login.vue @@ -57,13 +57,14 @@