diff --git a/src/composables/useRole.ts b/src/composables/useRole.ts new file mode 100644 index 000000000..6ce950f7a --- /dev/null +++ b/src/composables/useRole.ts @@ -0,0 +1,17 @@ +import store from '@/store'; + +export function useRole() { + function hasAny(roles: string[]): boolean { + const roleStore: string[] = store.state.roles; + + for (const role of roles) { + if (roleStore.indexOf(role) !== -1) return true; + } + + return false; + } + + return { + hasAny, + }; +} diff --git a/src/composables/useSession.ts b/src/composables/useSession.ts new file mode 100644 index 000000000..67533e398 --- /dev/null +++ b/src/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/composables/useState.ts b/src/composables/useState.ts new file mode 100644 index 000000000..d6c7a86d6 --- /dev/null +++ b/src/composables/useState.ts @@ -0,0 +1,59 @@ +import { ref, Ref, computed, ComputedRef } from 'vue'; + +interface User { + id: number; + username: string; + nickname: string; +} + +interface useState { + getUser: () => ComputedRef; + setUser: (data: User) => void; + getRoles: () => ComputedRef; + setRoles: (data: string[]) => void; +} + +const user: Ref = ref({ + id: 0, + username: '', + nickname: '', +}); + +const roles: Ref = ref([]); + +export function useState(): useState { + function getUser(): ComputedRef { + return computed(() => { + return { + id: user.value.id, + username: user.value.username, + nickname: user.value.nickname, + }; + }); + } + + function setUser(data: User): void { + user.value = { + id: data.id, + username: data.username, + nickname: data.nickname, + }; + } + + function getRoles(): ComputedRef { + return computed(() => { + return roles.value; + }); + } + + function setRoles(data: string[]): void { + roles.value = data; + } + + return { + getUser, + setUser, + getRoles, + setRoles, + }; +} diff --git a/src/layouts/Main.vue b/src/layouts/Main.vue new file mode 100644 index 000000000..cc019c959 --- /dev/null +++ b/src/layouts/Main.vue @@ -0,0 +1,83 @@ + + + + + diff --git a/src/layouts/MainLayout.vue b/src/layouts/MainLayout.vue deleted file mode 100644 index f124e2e98..000000000 --- a/src/layouts/MainLayout.vue +++ /dev/null @@ -1,107 +0,0 @@ - - - diff --git a/src/pages/Customer/Card/Card.vue b/src/pages/Customer/Card/Card.vue new file mode 100644 index 000000000..6517a1f85 --- /dev/null +++ b/src/pages/Customer/Card/Card.vue @@ -0,0 +1,15 @@ + diff --git a/src/pages/Customer/Customer.vue b/src/pages/Customer/Customer.vue new file mode 100644 index 000000000..2785996d8 --- /dev/null +++ b/src/pages/Customer/Customer.vue @@ -0,0 +1,3 @@ + diff --git a/src/pages/Customer/List.vue b/src/pages/Customer/List.vue new file mode 100644 index 000000000..70325e7e2 --- /dev/null +++ b/src/pages/Customer/List.vue @@ -0,0 +1,145 @@ + + + + + diff --git a/src/pages/Dashboard/Dashboard.vue b/src/pages/Dashboard/Dashboard.vue new file mode 100644 index 000000000..353def709 --- /dev/null +++ b/src/pages/Dashboard/Dashboard.vue @@ -0,0 +1,7 @@ + + + diff --git a/src/pages/Index.vue b/src/pages/Index.vue deleted file mode 100644 index 98a8e6106..000000000 --- a/src/pages/Index.vue +++ /dev/null @@ -1,23 +0,0 @@ - - - - - \ No newline at end of file diff --git a/src/pages/Login/Login.vue b/src/pages/Login/Login.vue new file mode 100644 index 000000000..d3fae6f9d --- /dev/null +++ b/src/pages/Login/Login.vue @@ -0,0 +1,139 @@ + + + + + diff --git a/src/pages/Error404.vue b/src/pages/NotFound.vue similarity index 100% rename from src/pages/Error404.vue rename to src/pages/NotFound.vue diff --git a/src/router/index.ts b/src/router/index.ts index fdf9cabbc..3d5230a5c 100644 --- a/src/router/index.ts +++ b/src/router/index.ts @@ -1,9 +1,9 @@ import { route } from 'quasar/wrappers'; import { - createMemoryHistory, - createRouter, - createWebHashHistory, - createWebHistory, + createMemoryHistory, + createRouter, + createWebHashHistory, + createWebHistory, } from 'vue-router'; import routes from './routes'; @@ -17,23 +17,23 @@ import routes from './routes'; */ export default route(function (/* { store, ssrContext } */) { - const createHistory = process.env.SERVER - ? createMemoryHistory - : process.env.VUE_ROUTER_MODE === 'history' - ? createWebHistory - : createWebHashHistory; + const createHistory = process.env.SERVER + ? createMemoryHistory + : process.env.VUE_ROUTER_MODE === 'history' + ? createWebHistory + : createWebHashHistory; - const Router = createRouter({ - scrollBehavior: () => ({ left: 0, top: 0 }), - routes, + const Router = createRouter({ + scrollBehavior: () => ({ left: 0, top: 0 }), + routes, - // Leave this as is and make changes in quasar.conf.js instead! - // quasar.conf.js -> build -> vueRouterMode - // quasar.conf.js -> build -> publicPath - history: createHistory( - process.env.MODE === 'ssr' ? void 0 : process.env.VUE_ROUTER_BASE - ), - }); + // Leave this as is and make changes in quasar.conf.js instead! + // quasar.conf.js -> build -> vueRouterMode + // quasar.conf.js -> build -> publicPath + history: createHistory( + process.env.MODE === 'ssr' ? void 0 : process.env.VUE_ROUTER_BASE + ), + }); - return Router; + return Router; }); diff --git a/src/router/routes.ts b/src/router/routes.ts index aa498a2eb..9d720ab96 100644 --- a/src/router/routes.ts +++ b/src/router/routes.ts @@ -1,18 +1,47 @@ import { RouteRecordRaw } from 'vue-router'; const routes: RouteRecordRaw[] = [ - { - path: '/', - component: () => import('layouts/MainLayout.vue'), - children: [{ path: '', component: () => import('pages/Index.vue') }], - }, - - // Always leave this as last one, - // but you can also remove it - { - path: '/:catchAll(.*)*', - component: () => import('pages/Error404.vue'), - }, + { + path: '/login', + name: 'Login', + component: () => import('../pages/Login/Login.vue'), + }, + { + path: '/', + name: 'Main', + component: () => import('../Layout/Main.vue'), + redirect: { name: 'Dashboard' }, + children: [ + { + path: '/dashboard', + name: 'Dashboard', + component: () => import('../pages/Dashboard/Dashboard.vue'), + }, + { + path: '/customer', + name: 'Customer', + component: () => import('../pages/Customer/Customer.vue'), + redirect: { name: 'List' }, + children: [ + { + path: 'list', + name: 'List', + component: () => import('../pages/Customer/List.vue'), + }, + { + path: ':id', + name: 'Card', + component: () => import('../pages/Customer/Card/Card.vue'), + }, + ], + }, + { + path: '/:pathMatch(.*)*', + name: 'NotFound', + component: () => import('../pages/Layout/NotFound.vue'), + }, + ], + }, ]; export default routes;