如何使用 express.js 將 cookie 值傳遞給所有路由？

Question

我正在試驗 Next.js，它使用 Express.js 作為服務器。 我想通過檢查用戶的身份驗證 cookie 是否存在來對服務器上的用戶進行身份驗證（cookie 是在登錄時在客戶端上設置的）。

這是我的做法（我正在自定義下一個默認 server.js 文件）：

const express = require( 'express' )
const next = require( 'next' )

const cookiesMiddleware = require( 'universal-cookie-express' )
const dev = process.env.NODE_ENV !== 'production'
const app = next( { dev } )
const handle = app.getRequestHandler()

app.prepare().then( async () => {

    const server = express()

    server.use( cookiesMiddleware() )

    server.get( '/news', ( req, res ) => {
        const actualPage = '/news'
        const userID = req.universalCookies.get( 'userID' )
        const queryParams = { userID: userID }
        app.render( req, res, actualPage, queryParams )
    })  

    server.get( '*', ( req, res ) => {
        return handle( req, res )
    }) 

    server.listen( 3000, ( err ) => {
        if( err ) throw err
        console.log( '> Ready on http://localhost:3000' )
    })

})

所以基本上我使用universal-cookie-express包作為中間件從請求中讀取userID cookie，並將其作為參數傳遞給/news路由，它有自己的特殊server.get因為它必須被渲染根據 Next.js 說明，有自己的頁面。

然后在新聞頁面中，我在getInitialProps獲取 cookie 值：

static async getInitialProps( { query } ) {
    const { userID } = query
    return { userID }
}

render() {
    return <p>The user ID is { this.props.userID }</p>
}

這是非常好的。

順便說一下，上面的代碼有效。 問題是我有幾個不同的路由，不想在每個server.get函數中讀取 cookie。 所以我的問題是，如何讀取userID cookie 並將其傳遞給所有路由，以及如何在每個頁面中訪問它？

Answer 1

我發現自己有一個非常巧妙的解決方案。 在設置路線之前，我剛剛添加了以下內容：

server.use( ( req, res, next ) => {
    req.userID = req.universalCookies.get( 'userID' )
    req.userToken = req.universalCookies.get( 'userToken' )
    next()
})   

通過將 cookie 附加到req對象，這使得每個路由都可以使用 cookie。 因此，在服務器上，您可以按如下方式訪問它：

server.get( '/news', ( req, res ) => {
    console.log( 'User ID is', req.userID )
})  

在客戶端，如果你像我一樣使用 Next，你可以在getInitialProps訪問它：

static async getInitialProps( { req } ) {
    console.log( 'User ID is', req.userID ) 
}

Answer 2

有幾種方法可以實現：

1. 使用反應狀態管理（redux/fluxible） 。

   閱讀更多關於 redux

   閱讀更多關於fluxible

2. 使用react-cookies依賴項。

 import { Component } from 'react' import cookie from 'react-cookies' class MyApp extends Component { constructor () { super() this.onLogin = this.onLogin.bind(this) this.onLogout = this.onLogout.bind(this) } componentWillMount() { // Get the userID value from react-cookie this.state = { userId: cookie.load('userId') } } onLogin(userId) { this.setState({ userId }) // Store the cookie in react-cookie cookie.save('userId', userId, { path: '/' }) } onLogout() { // Destroy the cookie from react-cookie cookie.remove('userId', { path: '/' }) } render() { const { userId } = this.state return ( <div /> ); } }

3. 使用窗口 sessionStorage 。

   Sessionstorage 為每個給定的源維護一個單獨的存儲區域，在頁面會話期間可用（只要瀏覽器打開，包括頁面重新加載和恢復）。 一旦瀏覽器關閉並重新打開，會話就會自動銷毀。

    // Store the cookie sessionStorage.setItem("userId", userId); // Get the value of cookie sessionStorage.getItem("userId");