Как передать значение cookie всем маршрутам с помощью express.js? - PullRequest
Новая
       9

Как передать значение cookie всем маршрутам с помощью express.js?

0 голосов
/ 05 января 2019

Я экспериментирую с Next.js, который использует Express.js в качестве сервера. Я хотел бы аутентифицировать пользователя на сервере, проверив, присутствует ли куки-файл аутентификации пользователя (куки-файл устанавливается на клиенте в момент входа в систему).

Вот как я это делаю (я настраиваю следующий файл 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 в качестве промежуточного программного обеспечения для чтения cookie-файла userID из запроса и передачи его в качестве параметра в маршрут /news, который имеет свой специальный server.get, поскольку он должен отображаться со своей собственной страницей в соответствии с инструкциями Next.js.

Затем на странице новостей я получаю значение cookie в getInitialProps: 

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

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

что очень приятно.

Код выше работает, кстати. Проблема в том, что у меня есть несколько разных маршрутов, и я не хочу читать cookie в каждой функции server.get. Итак, мой вопрос: как мне прочитать файл cookie userID и передать его на все маршруты, и как я могу получить к нему доступ на каждой странице?

Ответы [ 2 ]

0 голосов
/ 06 января 2019

Я нашел себе очень аккуратное решение. Я только что добавил следующее перед настройкой моих маршрутов: 

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

Это делает куки доступными для каждого маршрута, прикрепляя его к объекту req. Таким образом, на сервере вы получите доступ к нему следующим образом: 

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 ) 
}
0 голосов
/ 05 января 2019

Есть несколько способов сделать это:

  1. Использование управления состоянием реакции (избыточный / гибкий) .

    Узнайте больше о redux

    Подробнее о флюкс

  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 />
    );
  }
}

  1. Использование окна sessionStorage .

    Sessionstorage поддерживает отдельную область хранения для каждого данного источника, доступную на время сеанса страницы (пока открыт браузер, включая перезагрузку и восстановление страницы). После закрытия и повторного открытия браузера сеанс автоматически уничтожается. 

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