Проверьте, вошел ли пользователь в React, использующий бэкэнд для экспресс-паспорта

Question

Я хочу, чтобы React знал, вошел ли пользователь в систему или нет.

Я использую passport-github, и в настоящее время пользователь может войти в систему. Однако реакции не знает , кто вошел в систему или нет, и я хочу реагировать, чтобы проверить, если пользовательаутентифицирована.

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

У меня есть смутное представление о том, как это сделать в реакции.

например, если

token != null

войти в систему пользователя

routs / users.js

router.get('/auth/github', passport.authenticate('github',  { session: true, scope: ['profile'] }) );

router.get('/auth/github/callback', 
  passport.authenticate('github', { failureRedirect: '/' }),
  function(req, res) {
    // Successful authentication, redirect home.
    var token = jwt.sign({ id: req.user.id},  'nodeauthsecret');
        res.cookie("jwt", token, { expires: new Date(Date.now() + 10*1000*60*60*24)});
    res.redirect('http://127.0.0.1:3000/dashboard');
    console.log(token) // renders a token, how can react fetch this token ?
    console.log('this works');
});

App.js

import React, { Component } from 'react';
// import axios from 'axios';
import Navbar from './components/Navbar';
import Grid from '@material-ui/core/Grid';
import Paper from '@material-ui/core/Paper';
import { withStyles } from '@material-ui/core/styles';
import Chip from '@material-ui/core/Chip';
const styles = theme => ({
  root: {
    flexGrow: 1,
    padding: 20
  },
  paper: {
    padding: theme.spacing.unit * 2,
    textAlign: 'center',
    color: theme.palette.text.secondary,
  },

  chip: {
    margin: theme.spacing.unit,
  },
});


class App extends Component {

  constructor(props){
    super(props);

    this.state = {
      user: ""
    }

}

componentWillMount(){
  // example code

  // fetch token from backend
  fetch('/api/token')
    .then( (res) => {
        localStorage.setItem() // set token as localStorage
    })
}



  render() {

    const { classes } = this.props;
    return (

      <div className="App">

        <Navbar />



      </div>
    );
  }
}
export default withStyles(styles)(App);

Answer 1

Похоже, у вас это уже есть.Сервер возвращает токен клиенту после входа в систему. Клиент устанавливает токен в localStorage.React теперь может ссылаться на этот токен там, где он должен отображать пользовательский интерфейс соответствующим образом.

Было бы неплохо, чтобы isLoggedIn выставлялся в контексте реагирования или устанавливался в хранилище резервов и т. Д., Чтобы вы могли получить доступ к немуво всех компонентах приложения