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

Question

我正在使用 react 和 express，但我没有进行服务器端渲染，但我使用一些路由（例如 /login /register）从 react 接收数据。我正在使用 react 路由器导航 HashRouter 我的问题是我是混淆在哪里检查天气用户是否经过身份验证我应该在反应或服务器上进行吗？即检查会话是否存在..我正在使用 cookie-session 来存储一些信息。如果不可能，那么这就是 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!'
            })
        }
    })
})

登录.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 中分派一个身份验证操作

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");

这是我在 express 应用中实现 create-react-app 和 Passport.js / JWT。 (https://github.com/Tetsuya3850/MERN-Sprint/tree/master/auth) 忽略本机文件。