verdnatura/salix-front
verdnatura
/
salix-front
2
2
Fork 1
Code Issues Pull Requests 99 Releases Wiki Activity

Added useSession and useState composables and remove vuex

This commit is contained in:
Joan Sanchez 2022-03-08 16:55:37 +01:00
parent cea499936f
commit 286605695b
12 changed files with 135 additions and 165 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

23
package-lock.json generated
View File

@ -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",

4
package.json
View File

@ -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",

26
src/components/Topbar.vue
View File

@ -27,7 +27,7 @@
<q-btn dense flat no-wrap>
<q-avatar size="lg">
<q-img
:src="`/api/Images/user/160x160/${user.id}/download?access_token=${user.token}`"
:src="`/api/Images/user/160x160/${user.id}/download?access_token=${token}`"
spinner-color="white"
/>
</q-avatar>
@ -41,24 +41,12 @@
</template>
<script lang="ts" setup>
import { computed } from 'vue';
import { useStore } from 'vuex';
import { useState } from '@/core/composables/useState';
import { useSession } from '@/core/composables/useSession';
import UserPanel from '@/components/UserPanel.vue';
interface UserProfile {
id: number;
username: string;
nickname: string;
token: string;
}
const store = useStore();
const user = computed((): UserProfile => {
return {
id: store.state.user.id,
username: store.state.user.username,
nickname: store.state.user.nickname,
token: store.getters.token,
};
});
const session = useSession();
const { getUser } = useState();
const user = getUser;
const token = session.getToken();
</script>

39
src/components/UserPanel.vue
View File

@ -21,7 +21,7 @@
<div class="column items-center" style="min-width: 150px">
<q-avatar size="80px">
<q-img
:src="`/api/Images/user/160x160/${user.id}/download?access_token=${user.token}`"
:src="`/api/Images/user/160x160/${user.id}/download?access_token=${token}`"
spinner-color="white"
/>
</q-avatar>
@ -40,23 +40,19 @@
<script lang="ts" setup>
import { onMounted, computed } from 'vue';
import { Dark, useQuasar } from 'quasar';
import { useStore } from 'vuex';
import { useI18n } from 'vue-i18n';
import { useRouter } from 'vue-router';
import axios from 'axios';
import { useState } from '@/core/composables/useState';
import { useSession } from '@/core/composables/useSession';
const quasar = useQuasar();
const store = useStore();
const state = useState();
const session = useSession();
const router = useRouter();
const { t, locale } = useI18n();
interface UserProfile {
id: number;
username: string;
nickname: string;
token: string;
}
const darkMode = computed({
get(): boolean {
return Dark.isActive;
@ -66,33 +62,30 @@ const darkMode = computed({
},
});
const user = computed((): UserProfile => {
return {
id: store.state.user.id,
username: store.state.user.username,
nickname: store.state.user.nickname,
token: store.getters.token,
};
});
const user = state.getUser;
const token = session.getToken();
onMounted(() => {
axios
.get('/api/accounts/acl')
.then((response) => {
store.dispatch('updateUserData', response.data);
.then(({ data }) => {
state.setUser({
id: data.user.id,
username: data.user.name,
nickname: data.user.nickname,
});
})
.catch(() => {
quasar.notify({
message: t('errors.statusUnauthorized'),
type: 'negative',
});
store.dispatch('logOut');
router.push('/login');
logout();
});
});
function logout(): void {
store.dispatch('logOut');
session.destroy();
router.push('/login');
}
</script>

2
src/core/composables/role.ts → src/core/composables/useRole.ts
View File

@ -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;

57
src/core/composables/useSession.ts Normal file
View File

@ -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,
};
}

43
src/core/composables/useState.ts Normal file
View File

@ -0,0 +1,43 @@
import { ref, Ref, computed, ComputedRef } from 'vue';
interface User {
id: number;
username: string;
nickname: string;
}
const user: Ref<User> = 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<User> = computed(() => {
return {
id: user.value.id,
username: user.value.username,
nickname: user.value.nickname,
};
});
/* function setRoles(data) {
roles.value = data;
} */
return {
roles,
getUser,
setUser,
};
}

6
src/main.ts
View File

@ -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');

7
src/router/index.ts
View File

@ -1,5 +1,5 @@
import { createRouter, createWebHistory, RouteRecordRaw } from 'vue-router';
import store from '../store';
import { useSession } from '@/core/composables/useSession';
const routes: Array<RouteRecordRaw> = [
{
@ -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();

8
src/shims-vuex.d.ts vendored
View File

@ -1,8 +0,0 @@
import { Store } from '@/store'; // path to store file
declare module '@vue/runtime-core' {
interface ComponentCustomProperties {
$store: Store;
$filters: Record<string, T>;
}
}

77
src/store/index.ts
View File

@ -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: {},
});

8
src/views/Login/Login.vue
View File

@ -57,13 +57,14 @@
<script lang="ts" setup>
import { computed, ref } from 'vue';
import { Dark, useQuasar } from 'quasar';
import { useStore } from 'vuex';
import { useI18n } from 'vue-i18n';
import { useRouter } from 'vue-router';
import axios from 'axios';
import { useSession } from '@/core/composables/useSession';
const quasar = useQuasar();
const store = useStore();
const session = useSession();
const router = useRouter();
const { t, locale } = useI18n();
@ -87,7 +88,7 @@ function onSubmit(): void {
password: password.value,
})
.then((response) => {
store.dispatch('logIn', {
session.set({
token: response.data.token,
keepLogin: keepLogin,
});
@ -99,7 +100,6 @@ function onSubmit(): void {
router.push('/dashboard');
})
.catch((error) => {
console.log(error);
const errorCode = error.response.status;
if (errorCode === 401) {
quasar.notify({