react的鉴权(受保护路由的实现)

react实现受保护路由的两种方式

通过高阶组件

• 因为都是写死的，可以改造一下，抛出接口

import React, { Component } from 'react'
import {Route, withRouter} from 'react-router-dom'

import Storage from '@/utils/Storage'

class VerifyCmp extends Component {

  componentDidMount() {
  // 这里抛出一个props函数
    return Storage.get("islogin") || this.props.history.push("/login")
  }

  render() {
    const Cmp = this.props.component
    return (
      <>
        { 
          <Route path={this.props.path} render={(router) => {
            return <Cmp {...router}></Cmp>
          }}></Route>
        }
      </>
    )
  }
}

export default withRouter(VerifyCmp)

通过路由侦听

• 都是通过类组件进行的案例，函数组件同理可以进行高阶组件和路由侦听来实现路由保护

import React, { Component } from 'react';
import RouterView from './router'
import { connect } from 'react-redux'
import { withRouter } from 'react-router-dom'
import Storage from '@/utils/storage'

@connect(state => ({
  footerMenu: state.getIn(['ck', 'footerMenu'])
}), null)
@withRouter
class App extends Component {

  constructor(props) {
    super(props);
    this.accessUri = ['/fav', '/click']
  }

	//判断是否是受保护路由 并且是否符合条件
  checkLogin(pathname) {
    const bool = this.accessUri.some(item => {
      return new RegExp(item).test(pathname)
    })
    if (bool && !Storage.get('islogin')) {
      this.props.history.push('/login')
      return;
    }
  }

  componentDidMount() {
    // console.log(this.accessUri.includes(this.props.location.pathname));
    this.checkLogin(this.props.location.pathname)

    //  总要 必须路由有侦听改变时才触发，而且第1次还不执行
    this.props.history.listen(location => {
      this.checkLogin(location.pathname)
    })
  }


  render() {
    return (
      <>
        <h3 style={{ display: this.props.footerMenu }}>aaa</h3>
        <RouterView />
      </>
    );
  }
}

export default App;

函数组件hook路由侦听的实现

const App = () => {
  const history = useHistory()

  const checkLogin = (pathname) => {
     console.log(123);
     // protectedRoute为导入的受保护路由
    const bool = protectedRoute.some(item => {
      return new RegExp(item).test(pathname)
    })
    if (bool && Storage.get('islogin') !== "") {
      history.push('/login')
    }

  }
// useEffect(effectFunc, []) 类似于 componentDidMount
// 组件第一次渲染会执行这个方法
  
  useEffect(() => {
    checkLogin("/admin")
    // 添加路由监听函数
 
    history.listen(location => {
      // 每次路由变化都会执行这个方法
      checkLogin(location.pathname)
    })
  }, [history])

  return (
    <ConfigProvider locale={zhCN}>  {/* 进入路由 */}
      <RouteList />   {/* 主路由 */}
      <AuthRoute />   {/* 受保护路由 */}
    </ConfigProvider >
  );
}

export default App;

还有一种方式，通过在axios响应拦截器中实现拦截