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

資訊專欄INFORMATION COLUMN

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

立即前往

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

利用react-router4的react-router-config做路由鑒權

Amos 發布于2019-08-22 18:03 / 3214人閱讀

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

一、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)
}

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

GPU云服務器云服務器 react-router4 利用python做圖像識別 vps做路由利用電腦做云服務器

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/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