如何使用 express.js 将 cookie 值传递给所有路由？

Question

I'm experimenting with Next.js which uses Express.js as a server. I'd like to authenticate the user on the server by checking if the user's authentication cookie is present (the cookie is set on the client at the moment of login).

Here's how I'm doing it (I'm customiziong the Next default server.js file):

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' )
    })

})

So basically I'm using the universal-cookie-express package as a middleware to read the userID cookie from the request, and passing it as a parameter to the /news route, which has its own special server.get because it must be rendered with its own page, as per Next.js instructions.

Then in the news page, I get the cookie value in getInitialProps :

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

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

which is very nice.

The above code works, by the way. The problem is I have several different routes and wouldn't want to read the cookie in each server.get function. So my question is, how do I read the userID cookie and pass it to all routes, and how do I access it in each page?

Answer 1

I found myself a very neat solution. I've just added the following before setting up my routes:

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

This makes the cookies available for each routes by attaching it to the req object. So on the server you would access it as follows:

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

and on the client, if you're using Next like me, you can access it in getInitialProps :

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

Answer 2

There are a few ways to accomplish that:

1. Using react state management (redux/fluxible) .

   Read more about redux

   Read more about fluxible

2. Using react-cookies dependency .

 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. Using window sessionStorage .

   Sessionstorage maintains a separate storage area for each given origin that's available for the duration of the page session (as long as the browser is open, including page reloads and restores). Once the browser is closed and reopened, the session automatically destroyed.

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