react导航守卫=>路由拦截与重定向 基于vue-router V5编写
目前网上已知的方法
// 现在是解决这个问题的第二天早上,所以我用了一天的时间,研究这个。特此发出,希望各位可以避免
// 本篇有抽脸的嫌疑,不过我只是陈述与点评,请不要妄加评断。若无法接受请评论或私聊,我会删除引用的。
// -过两天可能会把react
的完成版架构放出,to be continued。
- 方法说明: 在
browerRouter
中建立监听
摘自: https://juejin.cn/post/6989182520495439880#heading-5
正面的方法
可以使用其做用户习惯监听等, 目前在我的代码中其可以获取到Redux数据
无法解决的问题(解决办法不符合规范)
brwerRouter
中无法获取到history
, 即无法使用history.push
。
- 即:无法做到重定向路由。
- 方法说明:在
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合并,使其参与系统中修改
- 如果可以的话, 我这边有什么写的可以改进的请留言
- 该文件为<核心架构逻辑=>路由跳转规则部分>,当前项目架构完成(部分待优化)
- 文件中使用的加载仅为个人使用
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);