react如何向vue--beforeEach功能一樣做到路由守衛

//不通過react-router-dom進行路由的引用
import {Router} from 'react-router'
import { createBrowserHistory } from 'history'
//引入封裝的路由守衛的方法
import guard from '封裝路由守衛的路徑'

const history = createBrowserHistory();

//history
//listen: ƒ listen(listener)  監聽路由的變化
//replace: ƒ replace(path, state)  替換頁面
//push: ƒ push(path, state)   去哪個頁面

ReactDOM.render(
    <Provider {...store}>
        <Router history={history}>
            <RouterView routes={myRoutes} />
        </Router>
    </Provider>
    ,
    document.getElementById('root') as HTMLElement
);

guard(history)

//引入獲取獲取登錄態的方法
import { getToken } from '封裝的路徑'
import store from '倉庫地址'

function guard(history:any){
    //首先進入頁面時進行路由守衛的監聽
    beforeEach(history)
    const unListen = history.listen((location:object)=>{
        //location產生的屬性
        //hash: ""
        //key: "s8ztsq"
        //pathname: "/home/usermanage/usershow"
        //search: ""
        //state: undefined
        beforeEach(history)
    })
}

function beforeEach(history){
    //如果存在登錄態的話 我們就可以獲取到當前用戶的信息
    if(getToken()){
        //分為如果我們有登錄態但是沒有當前用戶信息我們則需要獲取到當前的用戶信息
        const userInfo:any = store.user.userInfo;
        //Object.keys獲取到的是數組 可以通過它來判斷當前用戶信息是不是存在的
        if(!Object.keys(userInfo).length){
            //獲取當前的用戶信息
            store.user.getUserInfoUser();
        }
    }else{
        //如果沒有登錄態的話我們就跳轉到登錄頁面 不可以訪問數據
        history.replace('/login')
    }
}