Vuejs ssr 检查用户是否已针对每个请求进行身份验证答案

【问题标题】：Vuejs ssr check user is authenticated for each requestVuejs ssr 检查用户是否已针对每个请求进行身份验证
【发布时间】：2018-06-09 03:04:50
【问题描述】：

我正在为我的应用程序使用这个 ssr 样板，https://github.com/vuejs/vue-hackernews-2.0

我不知道如何实现逻辑来检查每个用户的页面请求是否经过用户身份验证，我正在使用 cookie 来存储用户的token

我发现路由器可以在渲染组件之前处理请求：

  router.beforeEach((to, from, next) => {
    if (to.matched.some(record => record.meta.requiresAuth)) {
      // this route requires auth, check if logged in
      // if not, redirect to login page.
      // isLoggedIn()
      //   .then(response => response.json())
      //   .then(json => {
      //     console.log(json[0])
      //     next()
      //   })
      //   .catch(error => {
      //     console.log(error)
      //     next()
      //   })

      const x = true

      if (!x) {
        next({
          path: '/signin',
          query: { redirect: to.fullPath }
        })
      } else {
        next()
      }
    } else {
      next() // make sure to always call next()!
    }
  })

  return router
}

但问题是，路由器开始在客户端和服务器端使用此代码，在我的情况下这有点不正确。

如何只发送一次is user authenticated 的请求，或者在客户端还是在服务器端？

【问题讨论】：

标签： vue.js vuejs2 vue-router server-side-rendering

【解决方案1】：

回答我的问题，下一个方法 - 这是我搜索的内容，这个 vue 路由器中间件将在发送其他请求之前检查用户（在我的组件方法中，如 asyncData），然后将用户的信息存储：

// router/index.js

export function createRouter (cookies) {
  const router = new Router({ ... })

  router.beforeEach((to, from, next) => {
    // this route requires auth, check if logged in
    // if not, redirect to login page.
    if (to.matched.some(record => record.meta.requiresAuth)) {
      if (router.app.$store) {
        router.app.$store
          .dispatch('FETCH_CURRENT_USER', cookies)
          .then(next)
          .catch(() => next('/signin'))
      } else {
        next()
      }
    } else {
      next()
    }

    return router
}

// store/actions.js

export default {
  FETCH_CURRENT_USER: ({ commit }, cookie) => {
    const values = {
      credentials: 'include',
      headers: {
        'Content-Type': 'application/json',
        Origin: FRONTEND_HOST,
        Cookie: cookie
      }
    }

    return fetch(`${API_HOST}/api/v1/users/me`, values)
      .then(handleStatus)
      .then(handleJSON)
      .then(json => commit('SET_CURRENT_USER', json))
  }
}

【讨论】：