React路由验证是否登录

开始慢慢学点React，记录遇到的问题的解决方法

1、自定义React路由组件验证是否登录

为了避免未登录用户访问网页内容，需要在除登录路由以外的其他路由进行验证用户是否已登录，若登录则正常路由，若未登录则重定向到登录路由指向的页面进行登录。

此功能可以通过自定义路由组件来实现。这里默认本地使用sessionStorage存储了用户登录等相关信息。

//  src/components/validroute.js：
import React , {Component } from 'react';
import { Route, Redirect } from 'react-router-dom';

export default class ValidRoute extends Component{
    render(){
        let userData = sessionStorage.getItem('userData');
        return(
            <div>
                { userData ? <Route {...this.props}/> :
 <Redirect to='/login'/> 
}
            </div>
        )
    }
}

这里创建了一个新组件ValidRoute，验证sessionStorage中是否存储了用户数据（如果登录了，假定会在其他地方会将数据存在sessionStorage中），如果存储了，则将新组件的props原样传给原Router组件并返回该组件，否则返回一个重定向到登录页。

2、自定义路由组件的使用

自定义路由组件使用时与使用Route组件方法完全一致，在需要验证的页面路由使用自定义的路由组件即可：

// src/App.js:
import { Login } from './pages/login.js';
import { Home } from './pages/home.js';
import { BrowserRouter as Router , Switch , Route,Redirect } from 'react-router-dom';
import ValidRoute from './components/validrouter';

function App(props) { 
  return (    
    <div>
      <Router>
        <Switch>
          <Route path='/login' component={Login} />
          <ValidRoute path='/' component={Home} />
          <Redirect to="/" />
        </Switch>
      </Router>
    </div>
  );
}

3、登录页面跳转

登录界面需要做已登录验证，使用history.push跳转到指定页面。

// import React, { useState, useEffect } from "react";
// import { useHistory } from "react-router-dom";
let history = useHistory();
useEffect(() => {
	let userData = sessionStorage.getItem("userData");
	if (userData){
		history.push("/");			
	}		
});

4、注意问题

• history.push应使用React Hooks中的useHistory()创建的history直接引入原生history实际无法跳转；
• 使用<Route />组件时，若采用<Route>此处不能有空格或内容</Route>形式的话前后两部分中间不能有空格或内容，否则，否则会报如下错误：You should not use<Route component> and <Route children> in the same route; <Route component>will be ignored，且路由会无法正确渲染。所以稳妥起见应采用<Route {...this.props}/>这种形式。
• 上文中的sessionStorage只是示例，只能存储字符串类型数据，要想存储对象之类的，需要使用JOSN.parse()和JSON.stringfy()两个api来实现。
• 当然sessionStorage也可以使用类似于useContext等功能实现。

--------------------------------

除非注明，否则均为清风揽月阁原创文章，转载应以链接形式标明本文链接

本文链接：https://www.iimm.ink/222.html