Löschen und Anzeigen von Sessions
This commit is contained in:
parent
644f225428
commit
2411fc86cd
|
|
@ -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
|
||||
}
|
||||
|
|
|
|||
|
|
@ -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;
|
||||
|
|
|
|||
|
|
@ -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
|
||||
)
|
||||
)
|
||||
);
|
||||
})
|
||||
) {
|
||||
|
|
|
|||
|
|
@ -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>
|
||||
|
|
|
|||
|
|
@ -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);
|
||||
});
|
||||
}
|
||||
};
|
||||
|
||||
|
|
|
|||
|
|
@ -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' });
|
||||
})
|
||||
|
|
|
|||
Loading…
Reference in New Issue