Question

我正在使用react和express但是我没有做服务器端渲染，但我使用一些路由，如/ login / register来接收来自反应的数据..我正在使用react路由器导航HashRouter我的问题是我很困惑在哪里检查天气用户是否应该在反应或服务器上进行身份验证？即检查会话是否存在..我正在使用cookie会话来存储一些信息。如果不可能，那么这是jwt令牌和护照js的来源吗？

这是我的服务器路线我想重定向到一些反应路线，但我不能这样做，因为服务器和反应路线的工作方式不同。

server.post('/login', (req, res) => {
    db.collection('users').findOne({
        email: req.body.email
    }, (err, succ) => {
        if(err) throw err;
        if(succ && succ.email == req.body.email && succ.password == req.body.password){
            req.session.id = succ._id;
            res.end()
        } else {
            res.json({
                message: 'Invalid email or password!'
            })
        }
    })
})

Login.js

onAuth = (e) => {
    e.preventDefault();
    const email = e.target.email.value;
    const password = e.target.password.value;
    fetch('/login', {
        method: 'POST',
        credentials: 'same-origin',
        body: JSON.stringify({email: email , password: password}),
        headers: {"Content-Type": "application/json"}
    }).then(res => res.json())
    .then(res => {
        this.setState({
            validate: {
                message: res.message
            }
        })
        return res;
    }).catch(err => console.log(err));
}

这是我的App.js现在我正在检查cookie，如果它现有的有效，但页面需要刷新才能生效..

class App extends React.Component{
    state = {
        cookie: Cookies.get('session') || false
    }
    render(){
        const {cookie} = this.state;
        return (
        <div>
        <Header/>
            <Switch>
                <Route path="/register" component={Register}/>
                <Route path="/login" component={Login}/>
                <ProtectedRoute cookie={cookie} path="/home" component={Home}/>
            </Switch>
        </div>
            );
    }
}

const ProtectedRoute = ({component: Component, cookie, ...rest}) => {
  return (
    <Route
      {...rest}
      render={(props) => cookie 
        ? <Component {...props} />
        : <Redirect to={{pathname: '/login', state: {from: props.location}}} />} />
  )
}

我正在使用HashRouter我的反应路由将是/＃/：path

的前缀

Answer 1

使用JWT时，请检查客户端的身份验证。

例如，在根组件中，您将在ComponentWillMount

中调度auth操作

class AppContainer extends Component {
  componentWillMount() {
    this.props.dispatch(reAuthUser(() => this.props.history.push("/login")));
  }

auth功能就是这样。

export const reAuthUser = redirect => async dispatch => {
  const userInfo = getUserInfo();
  if (userInfo && userInfo.exp >= Date.now() / 1000) {
    dispatch(authUser(userInfo));
  } else if (userInfo && userInfo.exp < Date.now() / 1000) {
    redirect();
  }
};

export const getUserInfo = () => {
  const token = getToken();
  let payload;
  if (token) {
    payload = token.split(".")[1];
    payload = window.atob(payload);
    return JSON.parse(payload);
  } else {
    return null;
  }
};

export const getToken = () => localStorage.getItem("jwt-token");

以下是我对create-react-app＆amp; amp;的实现Passport.js / JWT在快递应用中。（https://github.com/Tetsuya3850/MERN-Sprint/tree/master/auth）忽略原生文件。

我应该在哪里检查用户是否是经过身份验证的服务器或客户端？

1 个答案: