ferfissimo
/
flaschengeist-frontend
forked from Flaschengeist/flaschengeist-frontend
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

Löschen und Anzeigen von Sessions

This commit is contained in:
Tim Gröger 2020-10-16 13:07:31 +02:00
parent 644f225428
commit 2411fc86cd
6 changed files with 127 additions and 28 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

8
quasar.conf.js
View File

@ -9,7 +9,7 @@
/* eslint-disable @typescript-eslint/no-var-requires */
const { configure } = require('quasar/wrappers');
module.exports = configure(function (ctx) {
module.exports = configure(function(ctx) {
return {
// https://quasar.dev/quasar-cli/supporting-ts
supportTS: {
@ -64,7 +64,7 @@ module.exports = configure(function (ctx) {
// extractCSS: false,
// https://quasar.dev/quasar-cli/handling-webpack
extendWebpack (cfg) {
extendWebpack(cfg) {
// linting is slow in TS projects, we execute it only for production builds
if (ctx.prod) {
cfg.module.rules.push({
@ -103,7 +103,7 @@ module.exports = configure(function (ctx) {
// directives: [],
// Quasar plugins
plugins: []
plugins: ['LocalStorage']
},
// animations: 'all', // --- includes all animations
@ -191,7 +191,7 @@ module.exports = configure(function (ctx) {
// More info: https://quasar.dev/quasar-cli/developing-electron-apps/node-integration
nodeIntegration: true,
extendWebpack (/* cfg */) {
extendWebpack(/* cfg */) {
// do something with Electron main process Webpack cfg
// chainWebpack also available besides this extendWebpack
}

6
src/boot/axios.ts
View File

@ -1,6 +1,6 @@
import axios, { AxiosInstance } from 'axios';
import { boot } from 'quasar/wrappers';
import { StateInterface } from '../store';
import { Token, UserStateInterface } from 'src/plugins/user/store/user';
import config from '../config';
declare module 'vue/types/vue' {
@ -15,8 +15,10 @@ export default boot(({ Vue, store }) => {
axios.defaults.baseURL = config.baseURL;
axios.interceptors.request.use(config => {
const token = (<StateInterface>store.state).user.token;
// eslint-disable-next-line @typescript-eslint/no-unsafe-member-access
const token: Token = (<UserStateInterface>store.state.user).token;
if (token) {
// eslint-disable-next-line @typescript-eslint/no-unsafe-member-access
config.headers['Authorization'] = 'Token ' + token.token;
}
return config;

16
src/boot/login.ts
View File

@ -1,20 +1,28 @@
import { boot } from 'quasar/wrappers';
import { StateInterface } from '../store';
import { UserStateInterface } from 'src/plugins/user/store/user';
import { RouteRecord } from 'vue-router';
export default boot(({ Vue, router, store }) => {
export default boot(({ router, store }) => {
router.beforeEach((to, from, next) => {
let user = (<StateInterface>store.state).user;
// eslint-disable-next-line @typescript-eslint/no-unsafe-member-access,@typescript-eslint/ban-ts-comment
// @ts-ignore
// eslint-disable-next-line @typescript-eslint/no-unsafe-member-access
const user: UserStateInterface = (<UserStateInterface>store.state).user;
console.log('login_boot', user);
if (
to.matched.some(record => {
to.matched.some((record: RouteRecord) => {
// permissions is set AND has NO matching permission
return (
// eslint-disable-next-line @typescript-eslint/no-unsafe-member-access
record.meta.permissions !== undefined &&
!(
// eslint-disable-next-line @typescript-eslint/no-unsafe-call,@typescript-eslint/no-unsafe-member-access
(
record.meta.permissions.filter((value: string) =>
user.permissions.includes(value)
).length > 0
)
)
);
})
) {

94
src/plugins/user/pages/Settings.vue
View File

@ -4,18 +4,55 @@
<div class="text-h5 row">
Deine Sessions:
</div>
<!--<div class="fit row justify-center content-center items-center">
<div
class="fit row justify-center content-center items-center q-gutter-sm"
>
<q-card
class="col-4"
class="col-12"
height=""
v-for="(session, index) in sessions"
:key="'session' + index"
>
<q-card-section>
{{ session }}
<q-card-section
v-if="isThisSession(session.token)"
class="text-caption"
>
Diese Session.
</q-card-section>
<q-card-section>
<div class="row">
<div class="col-xs-12 col-sm-6">
Browser:
<q-icon :name="getBrowserIcon(session.browser)" size="24px" />
{{ session.browser }}
</div>
<div class="col-xs-12 col-sm-6">
Plattform:
<q-icon :name="getPlatformIcon(session.platform)" size="24px" />
{{ session.platform }}
</div>
</div>
<div class="row">
<div class="col-xs-12 col-sm-6">
Lebenszeit:
{{ session.lifetime }}
</div>
<div class="col-xs-12 col-sm-6">
Läuft aus: {{ session.expires }}
</div>
</div>
</q-card-section>
<q-card-actions align="right">
<q-btn
flat
round
dense
icon="mdi-delete"
@click="deleteSession(session.token)"
/>
</q-card-actions>
</q-card>
</div> -->
</div>
<div class="row">
<q-btn label="show sessions" @click="showRootGetters" />
</div>
@ -24,19 +61,54 @@
</template>
<script lang="ts">
import { computed, defineComponent, reactive, ref } from '@vue/composition-api';
import { computed, defineComponent, onBeforeMount } from '@vue/composition-api';
import { mainLink } from '../plugin';
import { platform } from 'os';
export default defineComponent({
// name: 'PageName'
setup(_, ctx) {
const sessions = computed(
() => ctx.root.$store.getters['sessions/sessions']
);
setup(_, { root }) {
onBeforeMount(() => {
root.$store.dispatch('sessions/getSessions');
});
const sessions = computed(() => root.$store.getters['sessions/sessions']);
function showRootGetters() {
//ctx.root.$store.dispatch('sessions/getSessions');
console.log(sessions.value);
}
return { showRootGetters, sessions };
function getBrowserIcon(browser: string) {
return browser == 'firefox'
? 'mdi-firefox'
: browser == 'chrome'
? 'mdi-google-chrome'
: browser == 'safari'
? 'mdi-apple-safari'
: 'mdi-help';
}
function getPlatformIcon(platform: string) {
return platform == 'linux'
? 'mdi-linux'
: platform == 'windows'
? 'mdi-microsoft-windows'
: platform == 'apple'
? 'mdi-apple'
: 'mdi-help';
}
function deleteSession(token: string) {
root.$store.dispatch('sessions/deleteSession', token);
}
function isThisSession(token: string) {
return root.$store.getters['user/token'].token == token;
}
return {
showRootGetters,
sessions,
getBrowserIcon,
getPlatformIcon,
isThisSession,
deleteSession
};
}
});
</script>

17
src/plugins/user/store/session.ts
View File

@ -40,6 +40,7 @@ const actions: ActionTree<SessionInterface, StateInterface> = {
headers: { Token: rootGetters['user/token'].token }
})
.then(response => {
console.log(response.data);
commit('setSessions', response.data);
})
.catch(error => {
@ -48,6 +49,22 @@ const actions: ActionTree<SessionInterface, StateInterface> = {
.finally(() => {
commit('setLoading', false);
});
},
deleteSession({ commit, dispatch, rootGetters }, token) {
commit('setLoading', true);
axios
.delete(`http://localhost:5000/auth/${token}`, {
headers: { Token: rootGetters['user/token'].token }
})
.then(() => {
void dispatch('getSessions');
})
.catch(error => {
console.exception();
})
.finally(() => {
commit('setLoading', false);
});
}
};

8
src/plugins/user/store/user.ts
View File

@ -81,10 +81,10 @@ const actions: ActionTree<UserStateInterface, StateInterface> = {
commit('setUser', response.data.user);
commit('setUserId', response.data.userid);
commit('showState');
//LocalStorage.set('permissions', response.data.permissions);
//LocalStorage.set('token', response.data.token);
//LocalStorage.set('user', response.data.user);
//LocalStorage.set('userid', response.data.userid);
LocalStorage.set('permissions', response.data.permissions);
LocalStorage.set('token', response.data.token);
LocalStorage.set('user', response.data.user);
LocalStorage.set('userid', response.data.userid);
void Router.push({ name: 'user' });
})