从服务器检索用户设置

Question

我有一个 Vue.js 应用程序，需要用户登录。要做到这一点，我只需使用 Vue Router 的保护路由。当用户登录时，他们会收到一个来自服务器的认证令牌，我把它存储在本地存储中。

下面是其中的一小部分 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,
    }
  ]
})

这里是一小部分 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()
    })
  }
}

我想都很标准。所以我的问题是，在用户登录后，我需要调用服务器来检索用户的设置。我如何去做这件事，以确保一个登录的用户总是有他们的设置，他们在整个应用程序（即：它在商店）。

这里有几种情况。

• 用户第一次登录并收到他们的授权令牌（保存在本地存储中）。然后他们的设置被检索并保存到商店中。
• 一个用户昨天登录了。今天他们不需要再次登录，因为他们的auth token已经保存在本地存储中。因此，我只需要检索他们的设置，无论他们碰巧在哪个页面上打开应用程序。

本质上，我需要确保用户的设置在他们最初登录时或者在他们后来返回网站时已经登录时被下载。

Answer 1

你可以使用vuex dispatch. 创建一个获取用户设置的操作，然后，从你的 [AUTH_REQUEST] 动作，在成功登录时，调度创建的动作。

dispatch("[FETCH_USER_SETTINGS]", res.data.id);
localStorage.setItem('user-token', res.data.token);
commit(AUTH_SUCCESS, res.data);
resolve(res);

你还需要在你的params中包含它。

[AUTH_REQUEST]: ({ commit, dispatch }, user) => {

这样一来，这个动作就会在用户登录的任何情况下被调用。