Reduce data display latency using localstorage

This commit is contained in:
Bubka 2020-11-26 20:41:02 +01:00
parent 3a96c689fb
commit ea2ebc91d3
6 changed files with 51 additions and 28 deletions

View File

@ -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' })

View File

@ -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

View File

@ -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)
})
},

View File

@ -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>

View File

@ -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) {

View File

@ -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 }})
}
},