学习react-登录状态验证

1.创建三个页面LoginPage, HomePage,NotFoundPage用于Router

创建LoginPage.tsx用于做登录页面

// LoginPage.tsx
const LoginPage = (props:LoginProp) => {

    const navigate = useNavigate();
    
    return( 
      <h1 onClick={ ()=>{
        navigate("/");
      }}>Hello Login, {props.name}!</h1>
    )
  }
  
  export default LoginPage;

//LoginMeta.tsx

export interface LoginProp extends MetaProp{
    
}

export interface LoginState extends MetaState{
   
}

 创建HomePage.tsx，作为主页面，登录完成后，会跳转到这个页面

// HomePage.tsx
const HomePage = (props: HomeProp)=> {
    
  const { name } = props; //解构赋值
  return (
    <div>
      <h1>Hello, {name}!</h1>
     
    </div>);
  }
  
  export default HomePage;  

创建NotFoundPage.tsx ，作为其他路径页面，url是其他页面时，跳到这

// NotFoundPage.tsx
class NotFoundPage extends Component<MetaProp, MetaState> {

    constructor(props: LoginProp) {
        super(props);
        this.state = { count: 0 };
     }
    
    render() {
      return <h1>Hello, NotFound {this.props.name}!</h1>;
    }
  }
  
  export default NotFoundPage;

2.使用Context传递登录上下文 

学习react-Provider解决props需要层层传递问题https://blog.csdn.net/jacklam200/article/details/140534994

在前面文章的基础上，给Global类添加用户信息用于判断是否登录

// Global.tsx
export class Global {
    constructor() {
    }
    type = "";
    count = 0;
    name = 'react';
    loading = true;
    userName = "";
    userToken = "";
}

const globalStore = new Global();
export {globalStore};

3.定义AuthRouter用于判断登录

创建AuthRouter.tsx，利用之前讲到context，管理Global里的userToken数据

// AuthRouter.tsx
const AuthRouter = ({ children, redirectTo }) => {
  const theme = useTheme();
  
  // useEffect(
  //   () => setUrlUser(username)
  // )
  
  return theme?.global?.userToken != null &&  theme?.global?.userToken != undefined && theme?.global?.userToken != "" 
        ? children
       : <Navigate to={redirectTo} />;
}
export default AuthRouter;

4.配置Router

用AuthRouter配置需要登录页面，在这里我们只配置HomePage需要登录

// App.tsx
function App() {
  //const element = useRoutes(routes);
  return (
     <div className="App">

        <Routes>
            <Route path="/" element={
                <AuthRouter redirectTo="/login">
                  <HomePage name='test' />
                </AuthRouter>
              }/>
            <Route path="login" element={<LoginPage name='login'/>} />
            <Route path="*" element={<NotFoundPage name='not found'/>} />
        </Routes> 
     
    </div>
  );
}

export default App;

5.测试页面

在登录页面，创建点击模拟登录

// LoginPage.tsx
const LoginPage = (props:LoginProp) => {

    const navigate = useNavigate();
    const theme = useTheme()
    
    return( 
      <h1 onClick={ ()=>{
        setToken("1234")
        theme?.setGlobal({...theme?.global, "userToken":"1234"})
        navigate("/");
      }}>Hello Login, {props.name}!</h1>
    )
  }
  
  export default LoginPage;

 这样只要没登录情况下，到HomePage页面，都会跳到LoginPage，直到登录，才真正到HomePage页面

另外需要持久化，可以用localStorage