Question

我希望React知道用户是否登录。

我正在使用passport-github，当前用户可以登录。但是，反应不知道是谁登录，我想做出反应以检查用户是否已验证。

我想知道一种反应来捕获设置的令牌并将其保存到localStorage，并以此作为查看用户是否登录的方法。

我对如何做到这一点有一个模糊的想法。

例如，如果

token != null

登录用户

routes / 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可以在需要显示UI的地方引用该令牌。

最好在反应上下文中公开isLoggedIn道具，或在redux存储区中放置一个道具，这样您就可以在所有应用程序组件中访问该道具

检查用户是否从使用快速护照后端的React登录

1 个答案: