Получение данных cookie сеанса при начальной загрузке страницы после перенаправления с сервера (Node и React)

Question

Я пытаюсь создать систему токенов, чтобы разрешить аутентификацию по электронной почте. Поток, о котором я думаю, может работать ...

нажмите ссылку электронной почты (из формы site.com/login?token=hf74hf64 & email=m@email.com) -> сервер проверяет, что токен действителен, и электронная почта зарегистрирована -> сервер перенаправляет на '/' с помощью сеанса cookie -> клиент подтверждает сеанс cookie и аутентифицирует пользователя

Последний шаг - это то, где у меня проблемы. Как определить из моего компонента, что присутствует cookie сеанса?

Я думал о чем-то, как это в моем React компоненте Идент:

class AuthenticatedComponent extends Component { 
    componentWillMount() { 
     if (cookie) { 
     this.props.dispatch(authenticateUser())//..... 
     } 
    } 
} 

Might эту работу, или мне нужно сделать отдельный fetch на сервер и запустить отправку в зависимости от ответа?

Answer 1

Мы применили очень похожий подход для нашего приложения. Чтобы это сработало, мы обрабатываем все логины в узле, а не в реальных компонентах.

1. Проверьте маркер представлен в строке запроса
2. Pass маркер на сервер для проверки
3. Если маркер действительно, создать печенье, как вы бы для обычного пользователя/пасс войдите
4. Перенаправление вызова оригинальный URL, без токена

server.js

// I abstracted the login functionality into one call since it's the same for us 
var handleAuthRequest = function handleAuthRequest(auth_body, req, res, next) { 
    request ({ 
    method: 'POST', 
    uri: Constants.API_LOGIN_URL, 
    body: auth_body, 
    json: true 
    }, (error, response, body) => { 
    if (response.statusCode === 200) { 
     // this makes a cookie with the response of the body (auth token) 
     ssoUtils.generateCookies(body, res) 
     // this redirects to the initial url, with the provided cookie. 
     // Assuming your router already doesn't allow certain components to be accessed 
     // without a cookie, it would work the same for the login_token auth too. 
     res.redirect(req.url) 
    } 
    else { 
     next(); 
    } 
    }) 
} 

// this needs to come before any other routes 
app.use((req, res, next) => { 
// check if login_token query string was provided 
if (req.query.hasOwnProperty('login_token')) { 
    var {login_token} = req.query 
    // API call to server to validate token 
    var jwtToken = jwt.sign({ 
    sub: login_token 
    }, Constants.API_JWT_SECRET) 
    // modify the redirect url to remove the token 
    let parsed = url.parse(req.url) 
    delete req.query['login_token'] 
    let newUrl = parsed.pathname + '?' + qs.stringify(req.query) 
    req.url = newUrl 
    // call the generic login handler 
    return handleAuthRequest({link_token: jwtToken}, req, res, next) 
} 

Предполагая, что ваш сервер вернет тот же ответ при входе в систему или действительный токен ссылки, это просто перенаправит вызов обратно на любой существующий процесс, поэтому не требуется отдельная клиентская сторона. Как вы можете видеть, мы также подписываем токен в JWT, чтобы убедиться, что он принят только сервером, если он отправлен из нашего приложения.

Мы используем React Router для обработки маршрутизации на стороне клиента. Ваша onEnter проверка начального маршрута будет выглядеть следующим образом.

routes.js

// token is passed in from our cookie by both the client and server 
module.exports = function (token, userAgent, originalUrl) { 
    function isToken() { 
    return token !== undefined && token !== null; 
    } 
    function ifNoTokenRedirect(nextState, replaceState) { 
    // check if token is set from cookie 
    if (!isToken()) { 
     replaceState({ nextPathname: nextState.location.pathname}, '/signup? redirect=' + originalUrl.pathname); 
    } 
    } 
    return (
    // the actual routes 
) 
}