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

发表评论

邮箱地址不会被公开。 必填项已用*标注

回到顶部