Retrieve user settings from server - vue.js

Question

I have a Vue.js app that requires a user to log in. To do this I simply use Vue Router with protected routes. When the user logs in, they receive an auth token from the server which I store in local storage.
Here's a small part of router/index.js:
const ifNotAuthenticated = (to, from, next) => {
if (!store.getters.isAuthenticated) {
next()
return
}
next('/')
}
const ifAuthenticated = (to, from, next) => {
if (store.getters.isAuthenticated) {
next()
return
}
next('/login/')
}
export default new VueRouter({
routes: [
{
path: '/',
name: 'Dashboard',
component: Dashboard,
beforeEnter: ifAuthenticated,
},
{
path: '/login/',
name: 'Login',
component: Login,
beforeEnter: ifNotAuthenticated,
}
]
})
Here's a small part of store/modules/auth.js:
const actions = {
[AUTH_REQUEST]: ({ commit }, user) => {
return new Promise((resolve, reject) => {
commit(AUTH_REQUEST);
Api.getToken(user)
.then(res => {
localStorage.setItem('user-token', res.data.token);
commit(AUTH_SUCCESS, res.data);
resolve(res);
})
.catch(err => {
commit(AUTH_ERROR, err);
reject(err);
});
})
},
[AUTH_LOGOUT]: ({ commit }) => {
return new Promise((resolve) => {
commit(AUTH_LOGOUT)
localStorage.removeItem('user-token')
resolve()
})
}
}
All very standard I think. So my question is, after a user has logged in I need to make a call to the server to retrieve the users settings. How would I go about doing this to ensure that a logged in user always has their settings available to them throughout the app (ie: its in the store).
Here's a few scenarios:
The user logs in for the first time and receives their auth token (saved in local storage). Then their settings are retrieved and saved to the store.
A user logged in yesterday. Today they don't have to log in again because their auth token is already stored in local storage. Therefore I just need to retrieve their settings no matter which page they happen to open the app on.
Essentially, I need to ensure that a users settings are downloaded either when they initially log in or when they return to the site later on but are already logged in.

Answer 1

You could always use a vuex dispatch. Create an action that fetches the users settings, then, from your [AUTH_REQUEST] action, on successful login, dispatch the created action.
dispatch("[FETCH_USER_SETTINGS]", res.data.id);
localStorage.setItem('user-token', res.data.token);
commit(AUTH_SUCCESS, res.data);
resolve(res);
You'd also need to include it in your params:
[AUTH_REQUEST]: ({ commit, dispatch }, user) => {
This way the action will be called for any scenario where the user logs in.