国产xxxx99真实实拍_久久不雅视频_高清韩国a级特黄毛片_嗯老师别我我受不了了小说

資訊專欄INFORMATION COLUMN

上云采購季！| 2核2G4M爆款云服務(wù)器低至59元/年，更有多臺、長期優(yōu)惠，快來選購！

立即前往

首頁/文章專欄/利用react-router4的react-router-config做路由鑒權(quán)

利用react-router4的react-router-config做路由鑒權(quán)

Amos 發(fā)布于2019-08-22 18:03 / 3226人閱讀

摘要：一是一個幫助我們配置靜態(tài)路由的小助手。以上修改了部分源碼并完成了我們想要的效果。

一、react-router-config 是一個幫助我們配置靜態(tài)路由的小助手。
其源碼就是一個高階函數(shù) 利用一個map函數(shù)生成靜態(tài)路由

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 假設(shè)這是我們設(shè)置的路由數(shù)組（這種寫法和vue很相似是不是?)

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

//app.js 那么我們在app.js里這么使用就能幫我生成靜態(tài)的路由了

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

export default App

扯了半天，要如何利用這個插件幫我們路由鑒權(quán)呢？
用過vue的小朋友都知道，vue的router.js 里面添加 meta: { requiresAuth: true }
然后利用導(dǎo)航守衛(wèi)

router.beforeEach((to, from, next) => {
  // 在每次路由進(jìn)入之前判斷requiresAuth的值，如果是true的話呢就先判斷是否已登陸
})

二、基于類似vue的路由鑒權(quán)想法，我們稍稍改造一下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

修改后的源碼增加了兩個參數(shù) authed 、 authPath 和一個屬性 route.requiresAuth
然后再來看一下最關(guān)鍵的一段代碼

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

很簡單如果 route.requiresAuth = false 或者 authed = true 或者 route.path === authPath（參數(shù)默認(rèn)值"/login"）則渲染我們頁面，否則就渲染我們設(shè)置的authPath頁面，并記錄從哪個頁面跳轉(zhuǎn)。

相應(yīng)的router.js也要稍微修改一下

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

    },
    {
        path: "/user",
        component: User,
        requiresAuth: true, //需要登陸后才能跳轉(zhuǎn)的頁面

    },
    {
        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修改該值(關(guān)于redux不在我們這篇文章的討論范圍之內(nèi)）
const authPath = "/login" // 默認(rèn)未登錄的時候返回的頁面，可以自行設(shè)置

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

//登陸之后返回原先要去的頁面login函數(shù)
login(){
    const { from } = this.props.location.state || { from: { pathname: "/" } }
     // authed = true // 這部分邏輯自己寫吧。。。
    this.props.history.push(from.pathname)
}

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