react导航守卫=>路由拦截与重定向

目前网上已知的方法

// 现在是解决这个问题的第二天早上，所以我用了一天的时间，研究这个。特此发出，希望各位可以避免
// 本篇有抽脸的嫌疑，不过我只是陈述与点评，请不要妄加评断。若无法接受请评论或私聊，我会删除引用的。
// -过两天可能会把react的完成版架构放出，to be continued。

1. 方法说明: 在browerRouter中建立监听
   摘自: https://juejin.cn/post/6989182520495439880#heading-5

正面的方法

可以使用其做用户习惯监听等, 目前在我的代码中其可以获取到Redux数据

无法解决的问题(解决办法不符合规范)

brwerRouter中无法获取到history, 即无法使用history.push。
- 即：无法做到重定向路由。

2. 方法说明：在 Router/index 中使用 <Redirect to={path}>实现路由的迟滞与重定向
   摘自：https://blog.csdn.net/lllomh/article/details/106768929

正面

该代码有解决实际问题

无法解决的问题(解决办法不符合规范)

可能由于其路由使用的是动态重做的，而本代码是使用逻辑递归配置和嵌套路由的吧，
- 当history.back()时无法与TabBar做到良好的响应
- 我还没直接使用其代码，这边并不知道在使用keepalive情况下还是否好用。
- 即：该解决办法解决了实际问题，但需要本代码更改和重新尝试的过多

目前使用的方法

也许不是复杂的才是好的，非暴力不合作
说明：劫持history.push方法

let history = this.props.history;
let _hpush = history.push;
history.push = function (path, state) {
    console.log("onPath", this.props, path, state);
    // 添加逻辑路由判断
    _hpush.call(history, path, state)
}.bind(this)

2021/12/24修改版 优化版劫持并与路由key合并，使其参与系统中修改

1. 如果可以的话, 我这边有什么写的可以改进的请留言
2. 该文件为<核心架构逻辑=>路由跳转规则部分>，当前项目架构完成(部分待优化)
3. 文件中使用的加载仅为个人使用

Routes/index 中注册路由劫持方法

// 劫持 history.push 方法，运行之前执行路由校验
let history = this.props.history;
let _hpush = history.push;
history.push = function (path, state) {
    let route = Router_rule(history.location, path, this.props)
    if (route) {
        path = typeof route === 'boolean' ? path : route;

        _hpush.call(history, path, state);
    }
}.bind(this)

src\Routes\rule.ts
属于半核心层了吧，没啥可不能放的

// 在antd-m 中看到发现好用并使用
import _ from 'lodash';
// 本项目中控制路由名称和路由配置表的文件
import { RouteNick } from "./config";
import { Toast } from 'antd-mobile';
// redux 项目
import { initAuth } from 'Store/auth/actions';


let SESSIONKEY_AUTH = "KEY_AUTH";

export interface router_rule {
    prev: string;
    next: string;
    props: any;
}
export interface linkto {
    pathname: string,
    state?: {
        [key: string]: any;
    }
}

/**
 * @param this TS使用的this，需要注册
 * @param prev 当前路由地址
 * @param next 点击路由地址
 * @param props 公共的props函数
 * @returns 
 */
function Router_rule(this: any, prev: linkto, next: linkto | string, props: any): boolean | linkto {
    // 整理结构 保证返回
    next = path_check(next);

    // 若路由重复点击则不做处理
    if (prev.pathname === next.pathname)
        return false;
    // 存在路由规则 则处理 否则 直接允许跳转
    else if (this[next.pathname])
        return this[next.pathname](prev, next, props);
    else
        return true;
}

const rules = {
    // TODO: demo ========================================== start
    // [RouteNick.{demo}]: function (this: any, prev: linkto, next: linkto, props: any): boolean | linkto {
    //     if (props.Store.getState().auth?.token)
    //         return true;
    //     else {
    //         Toast.show("登录后即可查看账户信息");
    //         return path_check(RouteNick.ROUTE_LOGIN);
    //     }
    // },

    // TODO: demo ========================================== end

    [RouteNick.ROUTE_MINE]: function (this: any, prev: linkto, next: linkto, props: any): boolean | linkto {
        let session_auth = sessionStorage.getItem(SESSIONKEY_AUTH);
        let redux_auth = props.Store.getState().auth;
        
        if (!_.isEmpty(redux_auth.userInfo)) {
            sessionStorage.setItem(SESSIONKEY_AUTH, JSON.stringify(redux_auth));
            return true;
        }
        else if(session_auth && session_auth !== '{}') {
            let auth = JSON.parse(session_auth);
            props.Store.dispatch(initAuth(auth));
            return true;
        }
        else {
            Toast.show("登录后即可查看账户信息");
            return path_check(RouteNick.ROUTE_LOGIN);
        }
    }
}

let path_check = (path: linkto | string): linkto => {
    if (typeof path === 'string')
        return { pathname: path }

    return path
}

export default Router_rule.bind(rules);