Fixed some TS issues related to user and session store

This commit is contained in:
Ferdinand Thiessen 2020-10-29 00:19:39 +01:00
parent 3f756437ee
commit 7c33a71c4d
4 changed files with 42 additions and 84 deletions

View File

@ -2,7 +2,6 @@ import { boot } from 'quasar/wrappers';
import { RouteRecord } from 'vue-router'; import { RouteRecord } from 'vue-router';
import { Store } from 'vuex'; import { Store } from 'vuex';
import { StateInterface } from 'src/store'; import { StateInterface } from 'src/store';
import { UserStateInterface } from 'src/plugins/user/store/user';
export default boot<Store<StateInterface>>(({ router, store }) => { export default boot<Store<StateInterface>>(({ router, store }) => {
router.beforeEach((to, from, next) => { router.beforeEach((to, from, next) => {
@ -11,29 +10,23 @@ export default boot<Store<StateInterface>>(({ router, store }) => {
.then(() => { .then(() => {
const user: FG.User = <FG.User>store.getters['user/user']; const user: FG.User = <FG.User>store.getters['user/user'];
const session: FG.Session = <FG.Session>store.getters['user/session']; const session: FG.Session = <FG.Session>store.getters['user/session'];
if (session.expires >= new Date()) {
store.dispatch('user/doLogout').catch(error => {console.warn(error)});
return next({ name: 'login', query: { redirect: to.fullPath } });
}
let permissions: string[] = []; let permissions: string[] = [];
user.roles.forEach(role => { user.roles.forEach(role => {
permissions = permissions.concat(role.permissions); permissions = permissions.concat(role.permissions);
}); });
console.log('route to', to);
console.log('route from', from);
if (to.name != 'login') {
console.log(new Date(session.expires), new Date());
console.log(new Date(session.expires) >= new Date());
if (
new Date(session.expires) >= new Date() &&
to.matched.every((record: RouteRecord) => {
const checkedPerimssions:
| boolean
| undefined = record.meta?.permissions?.every(
(permission: FG.Permission) => {
return permissions.includes(permission);
}
);
return checkedPerimssions === undefined if (to.name != 'login') {
? true if(to.matched.every((record: RouteRecord) => {
: checkedPerimssions; if (!('meta' in record) ||
!('permission' in record.meta))
return true;
return permissions.includes((<{permission: string}>record.meta).permission);
}) })
) { ) {
next(); next();
@ -43,25 +36,6 @@ export default boot<Store<StateInterface>>(({ router, store }) => {
} else { } else {
next(); next();
} }
// if (
// to.matched.some((record: RouteRecord) => {
// // permissions is set AND has NO matching permission
// return (
// 'permissions' in record.meta &&
// record.meta.permissions.filter((value: string) =>
// permissions.includes(value)
// ).length == 0
// );
// })
// ) {
// next({
// path: '/login',
// query: { redirect: to.fullPath }
// });
// } else {
// next();
// }
}) })
.catch(error => { .catch(error => {
console.exception(error); console.exception(error);

View File

@ -9,12 +9,12 @@ const routes: RouteConfig[] = [
path: 'user', path: 'user',
name: 'user', name: 'user',
component: () => import('../pages/User.vue'), component: () => import('../pages/User.vue'),
meta: { permissions: ['user'] }, meta: { permission: 'user' },
children: [ children: [
{ {
path: 'settings', path: 'settings',
name: 'user-settings', name: 'user-settings',
meta: { permissions: ['user'] }, meta: { permission: 'user' },
component: () => import('../pages/Settings.vue') component: () => import('../pages/Settings.vue')
} }
] ]

View File

@ -15,22 +15,26 @@ export interface LoginResponse {
session: FG.Session; session: FG.Session;
} }
const state: UserStateInterface = { const empty_session: FG.Session = {
user: { browser: '',
expires: new Date(),
lifetime: -1,
platform: '',
token: ''
};
const empty_user: FG.User = {
display_name: '', display_name: '',
firstname: '', firstname: '',
lastname: '', lastname: '',
mail: '', mail: '',
roles: [], roles: [],
userid: '' userid: ''
}, };
session: {
browser: '', const state: UserStateInterface = {
expires: new Date(), user: empty_user,
lifetime: -1, session: empty_session,
platform: '',
token: ''
},
loginLoading: false loginLoading: false
}; };
@ -61,8 +65,8 @@ const actions: ActionTree<UserStateInterface, StateInterface> = {
void axios void axios
.post('/auth', data) .post('/auth', data)
.then((response: AxiosResponse<LoginResponse>) => { .then((response: AxiosResponse<LoginResponse>) => {
response.data.session.expires = new Date(response.data.session.expires);
commit('setUser', response.data.user); commit('setUser', response.data.user);
console.log('saved permisisons');
commit('setSession', response.data.session); commit('setSession', response.data.session);
commit('showState'); commit('showState');
LocalStorage.set('user', response.data.user); LocalStorage.set('user', response.data.user);
@ -78,34 +82,26 @@ const actions: ActionTree<UserStateInterface, StateInterface> = {
Loading.hide(); Loading.hide();
}); });
}, },
logout({ commit }, token) {
doLogout({commit}, token: string) {
Loading.show({ message: 'Du wirst ausgeloggt' }); Loading.show({ message: 'Du wirst ausgeloggt' });
void axios void axios
.delete(`/auth/${token}`) .delete(`/auth/${token}`)
.then(() => { .then(() => {
commit('setUser', { commit('setUser', empty_user);
display_name: '', commit('setSession', empty_session);
firstname: '',
lastname: '',
mail: '',
roles: [],
userid: ''
});
commit('setSession', {
browser: '',
expires: '',
lifetime: '',
platform: '',
token: ''
});
}) })
.finally(() => { .finally(() => {
LocalStorage.remove('user'); LocalStorage.remove('user');
LocalStorage.remove('session'); LocalStorage.remove('session');
void Router.push({ name: 'login' });
Loading.hide(); Loading.hide();
}); });
}, },
logout({ dispatch}, token: string) {
dispatch('doLogout', token).finally(() => {void Router.push({ name: 'login' });});
},
updateUser({ commit, getters }, data) { updateUser({ commit, getters }, data) {
commit('setLoginLoading', true); commit('setLoginLoading', true);
axios axios
@ -117,6 +113,7 @@ const actions: ActionTree<UserStateInterface, StateInterface> = {
commit('setLoginLoading', false); commit('setLoginLoading', false);
}); });
}, },
loadFromLocalStorage({ commit }) { loadFromLocalStorage({ commit }) {
console.log('load from store'); console.log('load from store');
let data = LocalStorage.getItem('user'); let data = LocalStorage.getItem('user');
@ -124,27 +121,14 @@ const actions: ActionTree<UserStateInterface, StateInterface> = {
'setUser', 'setUser',
data data
? data ? data
: { : empty_user
display_name: '',
firstname: '',
lastname: '',
mail: '',
roles: [],
userid: ''
}
); );
data = LocalStorage.getItem('session'); data = LocalStorage.getItem('session');
commit( commit(
'setSession', 'setSession',
data data
? data ? data
: { : empty_session
browser: '',
expires: new Date(),
lifetime: -1,
platform: '',
token: ''
}
); );
commit('showState'); commit('showState');
} }

View File

@ -26,7 +26,7 @@ const routes: RouteConfig[] = [
{ {
name: 'about', name: 'about',
path: 'about', path: 'about',
meta: { 'permissions': ['user'] }, meta: { 'permission': 'user' },
component: () => import('pages/about/About.vue') component: () => import('pages/about/About.vue')
} }
] ]