利用react-router4的react-router-config做路由鉴权

Amos 发布于2019-08-22 18:03 / 3213人阅读

摘要：一是一个帮助我们配置静态路由的小助手。以上修改了部分源码并完成了我们想要的效果。

一、react-router-config 是一个帮助我们配置静态路由的小助手。
其源码就是一个高阶函数利用一个map函数生成静态路由

import React from "react";
import Switch from "react-router/Switch";
import Route from "react-router/Route";
const renderRoutes = (routes, extraProps = {}, switchProps = {}) =>
routes ? (
    
        {routes.map((route, i) => ( 
         (
            
          )}
        />
      ))}
    
  ) : null;
 export default renderRoutes;

//router.js 假设这是我们设置的路由数组（这种写法和vue很相似是不是?)

const routes = [
    { path: "/",
        exact: true,
        component: Home,
    },
    {
        path: "/login",
        component: Login,
    },
    {
        path: "/user",
        component: User,
    },
    {
        path: "*",
        component: NotFound
    }
]

//app.js 那么我们在app.js里这么使用就能帮我生成静态的路由了

import { renderRoutes } from "react-router-config"
import routes from "./router.js"
const App = () => (
   
      
         {renderRoutes(routes)}
      
   
)

export default App

扯了半天，要如何利用这个插件帮我们路由鉴权呢？
用过vue的小朋友都知道，vue的router.js 里面添加 meta: { requiresAuth: true }
然后利用导航守卫

router.beforeEach((to, from, next) => {
  // 在每次路由进入之前判断requiresAuth的值，如果是true的话呢就先判断是否已登陆
})

二、基于类似vue的路由鉴权想法，我们稍稍改造一下react-router-config
// utils/renderRoutes.js

import React from "react"
import { Route, Redirect, Switch } from "react-router-dom"
const renderRoutes = (routes, authed, authPath = "/login", extraProps = {}, switchProps = {}) => routes ? (
  
    {routes.map((route, i) => (
       {
          if (!route.requiresAuth || authed || route.path === authPath) {
            return 
          }
          return 
        }}
      />
    ))}
  
) : null

export default renderRoutes

修改后的源码增加了两个参数 authed 、 authPath 和一个属性 route.requiresAuth
然后再来看一下最关键的一段代码

if (!route.requiresAuth || authed || route.path === authPath) {
    return 
    }
    return

很简单如果 route.requiresAuth = false 或者 authed = true 或者 route.path === authPath（参数默认值"/login"）则渲染我们页面，否则就渲染我们设置的authPath页面，并记录从哪个页面跳转。

相应的router.js也要稍微修改一下

const routes = [
    { path: "/",
        exact: true,
        component: Home,
        requiresAuth: false,
    },
    {
        path: "/login",
        component: Login,
        requiresAuth: false,

    },
    {
        path: "/user",
        component: User,
        requiresAuth: true, //需要登陆后才能跳转的页面

    },
    {
        path: "*",
        component: NotFound,
        requiresAuth: false,
    }
]

//app.js

import React from "react"
import { Switch } from "react-router-dom"
//import { renderRoutes } from "react-router-config"
import renderRoutes from "./utils/renderRoutes"
import routes from "./router.js"

const authed = false // 如果登陆之后可以利用redux修改该值(关于redux不在我们这篇文章的讨论范围之内）
const authPath = "/login" // 默认未登录的时候返回的页面，可以自行设置

const App = () => (
   
      
         {renderRoutes(routes, authed, authPath)}
      
   
)
export default App

//登陆之后返回原先要去的页面login函数
login(){
    const { from } = this.props.location.state || { from: { pathname: "/" } }
     // authed = true // 这部分逻辑自己写吧。。。
    this.props.history.push(from.pathname)
}

以上～修改了部分源码并完成了我们想要的效果。

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/95445.html

react-router v5.x 源码分析和理解 SPA router 的原理

摘要：一般情况下，都是作为等其他子路由的上层路由，使用了，接收一个属性，传递给消费子组件。创建对象，兼容老浏览器，其他和没有大区别总结分为四个包，分别为，其中是浏览器相关，是相关，是核心也是共同部分，是一些配置相关。这篇文章主要讲的是分析 react-router 源码，版本是 v5.x，以及 SPA 路由实现的原理。文章首发地址单页面应用都用到了路由 router，目前来看实现路由有...

Harriet666 2019-08-23 18:37 评论0 收藏0
React-router v4 路由配置方法

摘要：使用了约等于才能匹配或者能匹配，所以说是约等于。使用了和才能匹配后续补充这是版本中新添加，主要用来做唯一匹配的功能。就是想要在众多路由中只匹配其中一个路由。 React-Router v4 一. Switch 、Router 、Route三者的区别 1、Route Route 是建立location 和 ui的最直接联系 2、Router react-router v4 中，Route...

Coding01 2019-08-20 18:30 评论0 收藏0
react-router 升级小记

摘要：前言最近将公司项目的从版本升到了版本，跟完全不兼容，是一次彻底的重写。升级过程中踩了不少的坑，也有一些值得分享的点。没有就会匹配所有路由最后不得不说升级很困难，坑也很多。前言最近将公司项目的 react-router 从 v3 版本升到了 v4 版本，react-router v4 跟 v3 完全不兼容，是一次彻底的重写。这也给升级造成了极大的困难，与其说升级不如说是对 route...

isLishude 2019-08-21 18:30 评论0 收藏0
从无到有-在create-react-app基础上接入react-router、redux-saga

摘要：将所有的需要鉴权的页面放在例如下，只有在有微信相关鉴权的信息存在，才允许访问接下来的界面，否则，容器内甚至可以直接不渲染接下来的界面。而接下来的则是把路由导向至了一个微信端专用的。搭建项目框架新建项目执行如下代码，用create-react-app来建立项目的基础框架，然后安装需要用到的依赖。 $ npx create-react-app my-test-project $ cd...

褰辩话 2019-08-23 14:06 评论0 收藏0
从路由原理出发，深入阅读理解react-router 4.0的源码

摘要：通过前端路由可以实现单页应用本文首先从前端路由的原理出发，详细介绍了前端路由原理的变迁。接着从的源码出发，深入理解是如何实现前端路由的。执行上述的赋值后，页面的发生改变。 react-router等前端路由的原理大致相同，可以实现无刷新的条件下切换显示不同的页面。路由的本质就是页面的URL发生改变时，页面的显示结果可以根据URL的变化而变化，但是页面不会刷新。通过前端路由可以实现...

Miyang 2019-08-23 12:01 评论0 收藏0