release v2.0.0 #4
|
@ -6,19 +6,21 @@ import { StateInterface } from 'src/store';
|
||||||
export default boot<Store<StateInterface>>(({ router, store }) => {
|
export default boot<Store<StateInterface>>(({ router, store }) => {
|
||||||
router.beforeEach((to, from, next) => {
|
router.beforeEach((to, from, next) => {
|
||||||
store.dispatch('user/loadFromLocalStorage').then(() => {
|
store.dispatch('user/loadFromLocalStorage').then(() => {
|
||||||
const permissions = store.getters['user/permissions'];
|
const user: User = store.getters['user/user'];
|
||||||
console.log('login_boot', permissions);
|
let permissions: string[] = [];
|
||||||
|
user.roles.forEach(role => {
|
||||||
|
permissions = permissions.concat(role.permissions)
|
||||||
|
});
|
||||||
|
|
||||||
if (
|
if (
|
||||||
to.matched.some((record: RouteRecord) => {
|
to.matched.some((record: RouteRecord) => {
|
||||||
// permissions is set AND has NO matching permission
|
// permissions is set AND has NO matching permission
|
||||||
return (
|
return (
|
||||||
permissions in record.meta &&
|
"permissions" in record.meta &&
|
||||||
!(
|
|
||||||
(
|
(
|
||||||
record.meta.permissions.filter((value: string) =>
|
record.meta.permissions.filter((value: string) =>
|
||||||
permissions.includes(value)
|
permissions.includes(value)
|
||||||
).length > 0
|
).length == 0
|
||||||
)
|
|
||||||
)
|
)
|
||||||
);
|
);
|
||||||
})
|
})
|
||||||
|
|
|
@ -1,5 +1,4 @@
|
||||||
interface Session {
|
interface Session {
|
||||||
user: User;
|
|
||||||
expires: Date;
|
expires: Date;
|
||||||
token: string;
|
token: string;
|
||||||
lifetime: number;
|
lifetime: number;
|
||||||
|
@ -7,25 +6,15 @@ interface Session {
|
||||||
platform: string;
|
platform: string;
|
||||||
}
|
}
|
||||||
interface User {
|
interface User {
|
||||||
roles: Array<Role>;
|
|
||||||
userid: string;
|
userid: string;
|
||||||
display_name: string;
|
display_name: string;
|
||||||
firstname: string;
|
firstname: string;
|
||||||
lastname: string;
|
lastname: string;
|
||||||
mail: string;
|
mail: string;
|
||||||
|
roles: Array<Role>;
|
||||||
}
|
}
|
||||||
interface Permission {
|
type Permission = string;
|
||||||
id: number;
|
|
||||||
name: string;
|
|
||||||
}
|
|
||||||
interface Role {
|
interface Role {
|
||||||
|
name: string;
|
||||||
permissions: Array<Permission>;
|
permissions: Array<Permission>;
|
||||||
id: number;
|
|
||||||
name: string;
|
|
||||||
}
|
|
||||||
interface UserAttribute {
|
|
||||||
id: number;
|
|
||||||
user: number;
|
|
||||||
name: string;
|
|
||||||
value: string;
|
|
||||||
}
|
}
|
||||||
|
|
|
@ -10,17 +10,17 @@
|
||||||
height=""
|
height=""
|
||||||
>
|
>
|
||||||
<q-card-section>
|
<q-card-section>
|
||||||
Name: {{ userSession.user.firstname }} {{ userSession.user.lastname }}<br />
|
Name: {{ userObj.firstname }} {{ userObj.lastname }}<br />
|
||||||
E-Mail: {{ userSession.user.mail }}<br />
|
E-Mail: {{ userObj.mail }}<br />
|
||||||
Roles:
|
Roles:
|
||||||
<ul
|
<ul
|
||||||
v-for="role in userSession.user.roles"
|
v-for="role in userObj.roles"
|
||||||
v-bind:key="role"
|
v-bind:key="role"
|
||||||
>
|
>
|
||||||
<li>{{ role }}</li>
|
<li>{{ role }}</li>
|
||||||
</ul>
|
</ul>
|
||||||
<br />
|
<br />
|
||||||
Token expires: {{ userSession.expires }}
|
Token expires: {{ sessionObj.expires }}
|
||||||
</q-card-section>
|
</q-card-section>
|
||||||
</q-card>
|
</q-card>
|
||||||
</q-page>
|
</q-page>
|
||||||
|
@ -36,16 +36,16 @@ import { mainLink } from '../plugin';
|
||||||
export default defineComponent({
|
export default defineComponent({
|
||||||
// name: 'PageName'
|
// name: 'PageName'
|
||||||
setup(_, { root }) {
|
setup(_, { root }) {
|
||||||
const userPermissions = computed(
|
const userObj = computed(
|
||||||
() => <UserStateInterface>root.$store.getters['user/permissions']
|
() => <UserStateInterface>root.$store.getters['user/user']
|
||||||
);
|
);
|
||||||
const userSession = computed(
|
const sessionObj = computed(
|
||||||
() => <UserStateInterface>root.$store.getters['user/session']
|
() => <UserStateInterface>root.$store.getters['user/session']
|
||||||
);
|
);
|
||||||
const checkMain = computed(() => {
|
const checkMain = computed(() => {
|
||||||
return mainLink.name == root.$route.name;
|
return mainLink.name == root.$route.name;
|
||||||
});
|
});
|
||||||
return { userPermissions, userSession, checkMain };
|
return { userObj, sessionObj, checkMain };
|
||||||
}
|
}
|
||||||
});
|
});
|
||||||
</script>
|
</script>
|
||||||
|
|
|
@ -11,18 +11,11 @@ export interface UserStateInterface extends LoginResponse {
|
||||||
}
|
}
|
||||||
|
|
||||||
export interface LoginResponse {
|
export interface LoginResponse {
|
||||||
permissions: string[];
|
user: User;
|
||||||
session: Session;
|
session: Session;
|
||||||
}
|
}
|
||||||
|
|
||||||
const state: UserStateInterface = {
|
const state: UserStateInterface = {
|
||||||
permissions: [],
|
|
||||||
session: {
|
|
||||||
browser: '',
|
|
||||||
expires: new Date(),
|
|
||||||
lifetime: -1,
|
|
||||||
platform: '',
|
|
||||||
token: '',
|
|
||||||
user: {
|
user: {
|
||||||
display_name: '',
|
display_name: '',
|
||||||
firstname: '',
|
firstname: '',
|
||||||
|
@ -30,14 +23,20 @@ const state: UserStateInterface = {
|
||||||
mail: '',
|
mail: '',
|
||||||
roles: [],
|
roles: [],
|
||||||
userid: ''
|
userid: ''
|
||||||
}
|
},
|
||||||
|
session: {
|
||||||
|
browser: '',
|
||||||
|
expires: new Date(),
|
||||||
|
lifetime: -1,
|
||||||
|
platform: '',
|
||||||
|
token: ''
|
||||||
},
|
},
|
||||||
loginLoading: false
|
loginLoading: false
|
||||||
};
|
};
|
||||||
|
|
||||||
const mutations: MutationTree<UserStateInterface> = {
|
const mutations: MutationTree<UserStateInterface> = {
|
||||||
setPermissions(state, data: []) {
|
setUser (state, data: User) {
|
||||||
state.permissions = data;
|
state.user = data;
|
||||||
},
|
},
|
||||||
setSession (state, data: Session) {
|
setSession (state, data: Session) {
|
||||||
state.session = data;
|
state.session = data;
|
||||||
|
@ -57,11 +56,11 @@ const actions: ActionTree<UserStateInterface, StateInterface> = {
|
||||||
void axios
|
void axios
|
||||||
.post('/auth', data)
|
.post('/auth', data)
|
||||||
.then((response: AxiosResponse<LoginResponse>) => {
|
.then((response: AxiosResponse<LoginResponse>) => {
|
||||||
commit('setPermissions', response.data.permissions);
|
commit('setUser', response.data.user);
|
||||||
console.log('saved permisisons');
|
console.log('saved permisisons');
|
||||||
commit('setSession', response.data.session);
|
commit('setSession', response.data.session);
|
||||||
commit('showState');
|
commit('showState');
|
||||||
LocalStorage.set('permissions', response.data.permissions);
|
LocalStorage.set('user', response.data.user);
|
||||||
LocalStorage.set('session', response.data.session);
|
LocalStorage.set('session', response.data.session);
|
||||||
|
|
||||||
void Router.push({ name: 'user' });
|
void Router.push({ name: 'user' });
|
||||||
|
@ -76,8 +75,15 @@ const actions: ActionTree<UserStateInterface, StateInterface> = {
|
||||||
},
|
},
|
||||||
logout ({ commit }, token) {
|
logout ({ commit }, token) {
|
||||||
void axios.delete(`/auth/${token}`).then(() => {
|
void axios.delete(`/auth/${token}`).then(() => {
|
||||||
commit('setPermissions', []);
|
commit('setUser', {
|
||||||
commit('setToken', {
|
display_name: '',
|
||||||
|
firstname: '',
|
||||||
|
lastname: '',
|
||||||
|
mail: '',
|
||||||
|
roles: [],
|
||||||
|
userid: ''
|
||||||
|
});
|
||||||
|
commit('setSession', {
|
||||||
browser: '',
|
browser: '',
|
||||||
expires: '',
|
expires: '',
|
||||||
lifetime: '',
|
lifetime: '',
|
||||||
|
@ -88,8 +94,15 @@ const actions: ActionTree<UserStateInterface, StateInterface> = {
|
||||||
},
|
},
|
||||||
loadFromLocalStorage ({ commit }) {
|
loadFromLocalStorage ({ commit }) {
|
||||||
console.log('load from store');
|
console.log('load from store');
|
||||||
let data = LocalStorage.getItem('permissions');
|
let data = LocalStorage.getItem('user');
|
||||||
commit('setPermissions', data ? data : []);
|
commit('setUser', data ? data : {
|
||||||
|
display_name: '',
|
||||||
|
firstname: '',
|
||||||
|
lastname: '',
|
||||||
|
mail: '',
|
||||||
|
roles: [],
|
||||||
|
userid: ''
|
||||||
|
});
|
||||||
data = LocalStorage.getItem('session');
|
data = LocalStorage.getItem('session');
|
||||||
commit(
|
commit(
|
||||||
'setSession',
|
'setSession',
|
||||||
|
@ -108,17 +121,14 @@ const actions: ActionTree<UserStateInterface, StateInterface> = {
|
||||||
};
|
};
|
||||||
|
|
||||||
const getters: GetterTree<UserStateInterface, StateInterface> = {
|
const getters: GetterTree<UserStateInterface, StateInterface> = {
|
||||||
permissions({ permissions }) {
|
user ({ user }) {
|
||||||
return permissions;
|
return user;
|
||||||
},
|
},
|
||||||
session ({ session }) {
|
session ({ session }) {
|
||||||
return session;
|
return session;
|
||||||
},
|
},
|
||||||
loginLoading ({ loginLoading }) {
|
loginLoading ({ loginLoading }) {
|
||||||
return loginLoading;
|
return loginLoading;
|
||||||
},
|
|
||||||
displayName({ session: { user } }) {
|
|
||||||
return `${user.firstname} ${user.lastname}`;
|
|
||||||
}
|
}
|
||||||
};
|
};
|
||||||
|
|
||||||
|
|
Loading…
Reference in New Issue