mirror of
https://github.com/Bubka/2FAuth.git
synced 2024-11-26 18:25:09 +01:00
Reduce data display latency using localstorage
This commit is contained in:
parent
3a96c689fb
commit
ea2ebc91d3
4
resources/js/mixins.js
vendored
4
resources/js/mixins.js
vendored
@ -14,9 +14,7 @@ Vue.mixin({
|
||||
|
||||
await this.axios.get('api/logout')
|
||||
|
||||
localStorage.removeItem('jwt')
|
||||
localStorage.removeItem('user')
|
||||
|
||||
this.$storage.clear()
|
||||
delete this.axios.defaults.headers.common['Authorization']
|
||||
|
||||
this.$router.push({ name: 'login' })
|
||||
|
21
resources/js/routes.js
vendored
21
resources/js/routes.js
vendored
@ -32,7 +32,7 @@ const router = new Router({
|
||||
|
||||
{ path: '/groups', name: 'groups', component: Groups, meta: { requiresAuth: true }, props: true },
|
||||
{ path: '/group/create', name: 'createGroup', component: CreateGroup, meta: { requiresAuth: true } },
|
||||
{ path: '/group/edit/:groupId', name: 'editGroup', component: EditGroup, meta: { requiresAuth: true } },
|
||||
{ path: '/group/edit/:groupId', name: 'editGroup', component: EditGroup, meta: { requiresAuth: true }, props: true },
|
||||
|
||||
{ path: '/settings', name: 'settings', component: Settings, meta: { requiresAuth: true } },
|
||||
|
||||
@ -48,7 +48,16 @@ const router = new Router({
|
||||
],
|
||||
});
|
||||
|
||||
router.beforeEach((to, from, next) => {
|
||||
let isFirstLoad = true;
|
||||
|
||||
router.beforeEach((to, from, next) => {
|
||||
|
||||
if( to.name === 'accounts') {
|
||||
to.params.isFirstLoad = isFirstLoad ? true : false
|
||||
isFirstLoad = false;
|
||||
}
|
||||
|
||||
|
||||
if (to.matched.some(record => record.meta.requiresAuth)) {
|
||||
// Accesses to restricted pages without a jwt token are routed to the login page
|
||||
if ( !localStorage.getItem('jwt') ) {
|
||||
@ -61,9 +70,11 @@ router.beforeEach((to, from, next) => {
|
||||
next()
|
||||
}
|
||||
}
|
||||
else {
|
||||
next()
|
||||
}
|
||||
else next()
|
||||
});
|
||||
|
||||
router.afterEach(to => {
|
||||
Vue.$storage.set('lastRoute', to.name)
|
||||
});
|
||||
|
||||
export default router
|
@ -277,12 +277,20 @@
|
||||
|
||||
},
|
||||
|
||||
props: ['InitialEditMode'],
|
||||
props: ['initialEditMode', 'toRefresh'],
|
||||
|
||||
mounted() {
|
||||
|
||||
this.fetchAccounts()
|
||||
this.fetchGroups()
|
||||
if( this.toRefresh || this.$route.params.isFirstLoad ) {
|
||||
this.fetchAccounts()
|
||||
this.fetchGroups()
|
||||
} else {
|
||||
const accounts = this.$storage.get('accounts', null) // use null as fallback if localstorage is empty
|
||||
!accounts ? this.fetchAccounts() : this.accounts = accounts
|
||||
|
||||
const groups = this.$storage.get('groups', null) // use null as fallback if localstorage is empty
|
||||
!groups ? this.fetchGroups() : this.groups = groups
|
||||
}
|
||||
|
||||
// stop OTP generation on modal close
|
||||
this.$on('modalClose', function() {
|
||||
@ -333,6 +341,8 @@
|
||||
group_id : data.group_id,
|
||||
})
|
||||
})
|
||||
|
||||
this.$storage.set('accounts', this.accounts)
|
||||
|
||||
// No account yet, we force user to land on the start view.
|
||||
if( this.accounts.length === 0 ) {
|
||||
@ -370,18 +380,6 @@
|
||||
this.axios.patch('/api/twofaccounts/reorder', {orderedIds: this.accounts.map(a => a.id)})
|
||||
},
|
||||
|
||||
/**
|
||||
* Delete the provided account
|
||||
*/
|
||||
deleteAccount(id) {
|
||||
if(confirm(this.$t('twofaccounts.confirm.delete'))) {
|
||||
this.axios.delete('/api/twofaccounts/' + id)
|
||||
|
||||
// Remove the deleted account from the collection
|
||||
this.accounts = this.accounts.filter(a => a.id !== id)
|
||||
}
|
||||
},
|
||||
|
||||
/**
|
||||
* Delete accounts selected from the Edit mode
|
||||
*/
|
||||
@ -434,6 +432,8 @@
|
||||
count: data.twofaccounts_count
|
||||
})
|
||||
})
|
||||
|
||||
this.$storage.set('groups', this.groups)
|
||||
})
|
||||
},
|
||||
|
||||
|
@ -55,7 +55,10 @@
|
||||
},
|
||||
|
||||
mounted() {
|
||||
|
||||
// Load groups for localstorage at first to avoid latency
|
||||
const groups = this.$storage.get('groups', null) // use null as fallback if localstorage is empty
|
||||
|
||||
if( groups ) this.groups = groups
|
||||
this.fetchGroups()
|
||||
},
|
||||
|
||||
@ -64,13 +67,17 @@
|
||||
async fetchGroups() {
|
||||
|
||||
await this.axios.get('api/groups').then(response => {
|
||||
const groups = []
|
||||
|
||||
response.data.forEach((data) => {
|
||||
this.groups.push({
|
||||
groups.push({
|
||||
id : data.id,
|
||||
name : data.name,
|
||||
count: data.twofaccounts_count
|
||||
})
|
||||
})
|
||||
|
||||
this.groups = groups
|
||||
})
|
||||
|
||||
// Remove the pseudo 'All' group
|
||||
@ -88,5 +95,12 @@
|
||||
|
||||
},
|
||||
|
||||
beforeRouteLeave(to, from, next) {
|
||||
// Refresh localstorage
|
||||
this.$storage.set('groups', this.groups)
|
||||
|
||||
next()
|
||||
}
|
||||
|
||||
}
|
||||
</script>
|
@ -253,7 +253,7 @@
|
||||
await this.form.post('/api/twofaccounts')
|
||||
|
||||
if( this.form.errors.any() === false ) {
|
||||
this.$router.push({name: 'accounts', params: { InitialEditMode: false }});
|
||||
this.$router.push({name: 'accounts', params: { toRefresh: true }});
|
||||
}
|
||||
|
||||
},
|
||||
@ -273,7 +273,7 @@
|
||||
// clean possible uploaded temp icon
|
||||
this.deleteIcon()
|
||||
|
||||
this.$router.push({name: 'accounts', params: { InitialEditMode: false }});
|
||||
this.$router.push({name: 'accounts'});
|
||||
},
|
||||
|
||||
async uploadQrcode(event) {
|
||||
|
@ -206,7 +206,7 @@
|
||||
await this.form.put('/api/twofaccounts/' + this.$route.params.twofaccountId)
|
||||
|
||||
if( this.form.errors.any() === false ) {
|
||||
this.$router.push({name: 'accounts', params: { InitialEditMode: true }})
|
||||
this.$router.push({name: 'accounts', params: { InitialEditMode: true, toRefresh: true }})
|
||||
}
|
||||
|
||||
},
|
||||
|
Loading…
Reference in New Issue
Block a user