這篇文章基於vue ssr官方教程，如果您沒看過，可能覺得內容有點莫名其妙，如果您看過的話，應當知道我在說什麼。

由於文件裡沒有cookie相關的內容，也沒有更進一步的講鑑權，所以我結合網上的一些文章，以及自己的專案中的總結，有了這篇文章。

一、首先看如何將COOKIE獲取

1、在檔案 server.js 中，獲取http請求中的cookie

const express = require('express')
var cookieParser = require('cookie-parser') // express 處理cookie

...

const app = express()
app.use(cookieParser())

...

  const context = {
    title: 'Vue HN 2.0', // default title
    url: req.url,
    cookies: req.cookies // 將http請求中的cookie傳入context，等待下一步處理
  }
 

2，在entry-server.js中處理 cookie

    const { url, cookies } = context
    const { app, router, store } = createApp(cookies && cookies.token) // 將cookie傳入app例項，下一節 鑑權用

...


    store.commit('initToken', cookies) // 將cookie資訊註冊到store裡

3、在 store（store/mutations.js）裡，將cookie資訊儲存

  initToken: (state, authInfo) => {
    state.token = authInfo.token
    Vue.set(state, 'userinfo', authInfo.userinfo)
  }
 

至此，已經將http請求中的cookie獲取，並儲存在store裡了，下面看鑑權的思路。

二、ssr中如何鑑權

鑑權的思路是放在router的beforeEach，最初是想判斷store裡是否有token和user資訊，但是在beforeEach階段，我還沒有找到辦法去訪問完整的store，所以放棄這個思路，改為判斷cookie。

如果使用者已經登入，那cookie一定已經儲存（如果你和我一樣，採用cookie儲存token的話），所以用cookie判斷使用者登入也很自然，具體是這樣做的：

1、在檔案router/index.js檔案裡，對路由做統一判斷

export function createRouter(token) {} // 將 token 傳如，如果有的話

...

      {
        path: '/user/',
        component: UserCenter,
        meta: {
          requireAuth: true // 標識這個頁面需要許可權
        }
      }

...

  route.beforeEach((to, from, next) => { // 判斷使用者是否登入
    if (to.matched.some(r => r.meta.requireAuth) && !token) {
      next('/')
    }
    next()
  })
 

2、在檔案enter-server.js裡，傳到cooke裡儲存的token（如果有的話）

    const { app, router, store } = createApp(cookies && cookies.token) // 如果有cookie裡存有token，傳入

3、在entry-client.js檔案裡，傳到客戶端cookie

const { app, router, store } = createApp(window.$cookies.get('token')) // 如果有的話

至此，已經完成了ssr中cookie的獲取、儲存至store、鑑權工作，如果您有更好的思路，歡迎留言交流。