React新手求教：携带Token重定向至主App组件并传递Token

Hey there! Let's walk through how to get this working step by step since you're new to React. Based on your code snippet, it looks like you're using React Router (since you're accessing this.props.match.params.id), so we'll build on that.

1. 完善SocialVerify组件：存Token并重定向 #

First, let's finish your SocialVerify component. After successfully storing the token, we'll use React Router's history object to redirect to your main App page. Here's the updated code:

import { withRouter } from 'react-router-dom'; // 引入withRouter
class SocialVerify extends Component {
  componentDidMount() {
    // 从路由参数获取token
    const token = this.props.match.params.id;
    
    fetch(`/api/account/social?token=${token}`)
      .then(res => res.json())
      .then(json => {
        if (json.success) {
          // 将token存入本地存储（注意：localStorage只能存字符串，所以要转成JSON）
          localStorage.setItem('the_main_app', JSON.stringify({ token: token }));
          
          // 重定向到主App页面，这里假设你的App路由路径是'/app'，根据实际情况修改
          this.props.history.push('/app');
        } else {
          // 处理验证失败的情况，比如跳回登录页并提示错误
          console.error('Token验证失败，请重试');
          this.props.history.push('/login');
        }
      })
      .catch(err => {
        // 处理请求出错的情况
        console.error('请求过程中出现错误:', err);
        this.props.history.push('/login');
      });
  }

  render() {
    // 验证过程中可以显示加载状态
    return <div>正在验证身份...</div>;
  }
}

// 用withRouter包裹组件，确保能拿到history、match等路由props
export default withRouter(SocialVerify);

2. 在App组件中获取Token并传递给子组件 #

Next, your main App component needs to retrieve the token from local storage and pass it to the child components that need it. Here's how to do that:

import { withRouter } from 'react-router-dom';
class App extends Component {
  state = {
    token: null,
    isLoading: true
  };

  componentDidMount() {
    // 从本地存储读取token
    const storedAuthData = localStorage.getItem('the_main_app');
    
    if (storedAuthData) {
      const { token } = JSON.parse(storedAuthData);
      this.setState({ token, isLoading: false });
    } else {
      // 如果没有token，直接跳回登录页
      this.props.history.push('/login');
      this.setState({ isLoading: false });
    }
  }

  render() {
    const { token, isLoading } = this.state;

    // 加载状态下显示提示
    if (isLoading) {
      return <div>正在加载应用...</div>;
    }

    // 有token的话，渲染所有子组件并传递token
    return (
      <div className="app-wrapper">
        {/* 示例：把token传递给需要它的子组件 */}
        <NavigationBar token={token} />
        <Dashboard token={token} />
        <SettingsPanel token={token} />
      </div>
    );
  }
}

export default withRouter(App);

几个关键注意点 #

• withRouter的作用：如果你的组件不是直接通过<Route>渲染的，它不会自动获得history、match这些路由props。用withRouter包裹组件后，就能调用history.push()来实现重定向了。
• 本地存储的坑：localStorage只能存储字符串，所以我们要用JSON.stringify()把对象转成字符串，读取时再用JSON.parse()转回来。
• 避免Props Drilling：如果你的应用很多组件都需要token，逐层传递props会很麻烦。等你熟悉React后，可以学习使用React Context API或者Redux来做全局状态管理，这样所有组件都能直接获取token，不用手动传递。
• 错误处理：一定要处理请求失败、验证失败的情况，不然用户可能会一直停在加载页面，体验很差。

内容的提问来源于stack exchange，提问作者Renato Alves