react router4 0實現登入攔截

2021-10-02 04:04:48 字數 3859 閱讀 3697

核心**(如下),其實理解了核心思想很簡單,剛開始被官方示例一大堆**給蒙蔽了,哈哈。

const privateroute = () => 

/>

)}

import react,  from "react";

import from "react-router-dom";

// 1. click the public page

// 2. click the protected page

// 3. log in

// 4. click the back button, note the url each time

function authexample()

const fakeauth = ,

signout(cb)

};const authbutton = withrouter(

() =>

fakeauth.isauthenticated ? (

welcome!

}>

sign out

) : (

you are not logged in.

));function privateroute()

/>

);}function public()

function protected()

class login extends component ;

login = () => );

});};

render() = this.props.location.state || };

let = this.state;

if (redirecttoreferrer) return ;

return (

you must log in to view the page at

log in

);}}

export default authexample;

import react,  from 'react';

import from 'react-router-dom';

import createbrowserhistory from 'history/createbrowserhistory'

const history = createbrowserhistory();

// 按路由拆分**

import loadable from 'react-loadable';

const loadingcomponent = () =>

// handle the error state

else if (error)

else

};const index = loadable();

const home= loadable();

const login= loadable();

/** * (路由根目錄元件,顯示當前符合條件的元件)

* * @class roots

* @extends

*/class roots extends component );}

}// 登入驗證

function requireauth(layout, props) else

}let router = process.env.node_env !== 'production' ? browserrouter : hashrouter;

const routeconfig = (

requireauth(home, props)} />

);export default routeconfig;

摘自:

核心**(如下),其實理解了核心思想很簡單,剛開始被官方示例一大堆**給蒙蔽了,哈哈。

const privateroute = () => 

/>

)}

import react,  from "react";

import from "react-router-dom";

// 1. click the public page

// 2. click the protected page

// 3. log in

// 4. click the back button, note the url each time

function authexample()

const fakeauth = ,

signout(cb)

};const authbutton = withrouter(

() =>

fakeauth.isauthenticated ? (

welcome!

}>

sign out

) : (

you are not logged in.

));function privateroute()

/>

);}function public()

function protected()

class login extends component ;

login = () => );

});};

render() = this.props.location.state || };

let = this.state;

if (redirecttoreferrer) return ;

return (

you must log in to view the page at

log in

);}}

export default authexample;

import react,  from 'react';

import from 'react-router-dom';

import createbrowserhistory from 'history/createbrowserhistory'

const history = createbrowserhistory();

// 按路由拆分**

import loadable from 'react-loadable';

const loadingcomponent = () =>

// handle the error state

else if (error)

else

};const index = loadable();

const home= loadable();

const login= loadable();

/** * (路由根目錄元件,顯示當前符合條件的元件)

* * @class roots

* @extends

*/class roots extends component );}

}// 登入驗證

function requireauth(layout, props) else

}let router = process.env.node_env !== 'production' ? browserrouter : hashrouter;

const routeconfig = (

requireauth(home, props)} />

);export default routeconfig;

摘自:

React Router 4 0 實現路由守衛

在使用 vue 或者 angular 的時候,框架提供了路由守衛功能,用來在進入某個路有前進行一些校驗工作,如果校驗失敗,就跳轉到 404 或者登陸頁面,比如 vue 中的beforeenter函式 router.beforeeach async to,from,next 在之前的版本中,react...

react router 4 0 公升級攻略

react router 4.0 出來好9了,專案在4月份的時候對react router進行了公升級,公升級耗費了3天,乙個坑乙個坑踩了過來。按照公司專案情況說下公升級改了哪些,專案使用的是hashhistory,browserhistory 的情況就不清楚了 1.package.json 配置修...

40 用棧實現佇列

正如標題所述,你需要使用兩個棧來實現佇列的一些操作。佇列應支援push element pop 和 top 其中pop是彈出佇列中的第乙個 最前面的 元素。pop和top方法都應該返回第乙個元素的值。例1 輸入 push 1 pop push 2 push 3 top pop 輸出 1 22 例2 ...