react 路由封装及页面授权

我所参考的博客

src下建一个router.js

import Landing from './components/layout/Landing'
import Login from './components/auth/Login'
import Register from './components/auth/Register'
import Dashboard from './components/dashboard/Dashboard'

let router = [
  {
    path: '/',//首页默认加载的页面
    componentName: Landing,
    exact: true, //是否为严格模式
  },
  {
    path: '/login',//后面是传递的参数id
    componentName: Login
  },
  {
    path: '/register',
    componentName: Register,
  },
  {
    path: '/dashboard',
    componentName: Dashboard,
    auth: true,//是否授权
    // routes: [  /** 嵌套路由  dashboard下面又有子页面*/
    //   {
    //     path: '/dashboard/',
    //     componentName: main,
    //     exact: false
    //   },
    // ]
  },
];

export default router;

app.js 引入router.js

import React, { Component } from 'react';
import {
  BrowserRouter as Router,
  Route,
  Redirect
} from 'react-router-dom';
import { connect } from 'react-redux'
import PrivateRoute from './common/PrivateRoute'
import store from './store';
import setAuthToken from './utils/setAuthToken'
import jwt_decode from 'jwt-decode'
import { setCurrentUser, logoutUser } from './actions/authActions'
import './App.css';
import Navbar from './components/layout/Navbar'
import Footer from './components/layout/Footer'
import router from './router'
// 防止页面刷新数据丢失
if (localStorage.jwtToken) {
  setAuthToken(localStorage.jwtToken)
  // 解析token
  const decoded = jwt_decode(localStorage.jwtToken)
  store.dispatch(setCurrentUser(decoded))
  // 判断token是否过期
  // 获取当前时间
  const currentTime = Date.now() / 1000
  // 当前时间大于过期时间
  if (currentTime > decoded.exp) {
    // 过期
    store.dispatch(logoutUser())
    window.location.href = '/login'
  }

}
export class App extends Component {
  render () {
    let { isAuthenticated } = this.props.auth
    return (
      <Router>
        <Navbar />
        <div className="App">
          {
            router.map((item, i) => {
              console.log('', item);
              return <Route exact={item.exact} path={item.path} key={i} render={(props) => {
                //登录情况下
                if (isAuthenticated) {
                  return <item.componentName {...props} routes={item.children} />
                }
                // 非授权页面
                if (!item.auth) {
                  return <item.componentName {...props} routes={item.children} />
                }
                // 未登录并页面授权时跳入登录页面
                return <Redirect to='/login' />
              }} />
            })
          }
          <Footer />
        </div >
      </Router>
    );
  }
}
// 获取reduce中在actions定义的initalStaten属性值
const mapStateToProps = (state) => ({
  auth: state.auth,
})
// dispatch 方法
const mapDispatchToProps = (dispatch) => {
  return {

  }
}
export default connect(mapStateToProps, mapDispatchToProps)(App)

二级路由使用

import React, { Component } from 'react';
import { Route, Link } from "react-router-dom";

class User extends Component {
    constructor(props) {
        super(props);
    }

    render() {
//接收父级页面传来的属性
        let {match, routes} = this.props;
        return (
            <div>
                <div className="content">
                    <div className="left">
                    
                        <Link to={`${match.url}`}>个人中心</Link>
                        <br/>
                        <Link to={`${match.url}/info`}>用户信息</Link>
                    </div>
                    <div className="right">
                    {
//routes对子路由遍历
                       routes.map(({path, componentName, exact = true},key) => {
                            return <Route 
                                        exact={exact}
                                        key={key} 
                                        path={path} 
                                        component={componentName}
                                        />
                        })
                    }
                        
                    </div>
                
                </div>
                
            </div>
        );
    }
}

export default User;

 

来源：CSDN

作者：周家大小姐.

链接：https://blog.csdn.net/qq_40190624/article/details/104175699