|
阅读：4153回复：0
react-router-dom5.0的路由拦截（路由守卫）实现
react不同于vue，通过在路由里设置meta元字符实现路由拦截。在使用 Vue ，框架提供了路由守卫功能，用来在进入某个路有前进行一些校验工作，如果校验失败，就跳转到 404 或者登陆页面，
比如 Vue 中的 beforeEnter 函数： ...
router.beforeEach(async(to, from, next) => {
const toPath = to.path;
const fromPath = from.path;
})
react实现路由拦截的基本思路还是利用Route 的render函数。通过判断拦截条件来实现不同的组件的跳转，从而实现拦截。在之前的版本中，React Router 也提供了类似的 onEnter 钩子，但在 React Router 4.0 版本中，取消了这个方法。React Router 4.0 以后采用了声明式的组件，路由即组件，要实现路由守卫功能，就得我们自己去写了。 如下代码，将写了一个高级组件，实现路由的判断逻辑 //FrontendAuth.js
import React, { Component } from "react";
import { Route, Redirect } from "react-router-dom";
class FrontendAuth extends Component {
// eslint-disable-next-line no-useless-constructor
constructor(props) {
super(props);
}
render() {
const { routerConfig, location } = this.props;
const { pathname } = location;
const isLogin = sessionStorage.getItem("username");
console.log(pathname, isLogin);
console.log(location);
// 如果该路由不用进行权限校验，登录状态下登陆页除外
// 因为登陆后，无法跳转到登陆页
// 这部分代码，是为了在非登陆状态下，访问不需要权限校验的路由
const targetRouterConfig = routerConfig.find(
(item) => item.path === pathname
);
console.log(targetRouterConfig);
if (targetRouterConfig && !targetRouterConfig.auth && !isLogin) {
const { component } = targetRouterConfig;
return <Route exact path={pathname} component={component} />;
}
if (isLogin) {
// 如果是登陆状态，想要跳转到登陆，重定向到主页
if (pathname === "/login") {
return <Redirect to="/" />;
} else {
// 如果路由合法，就跳转到相应的路由
if (targetRouterConfig) {
return (
<Route path={pathname} component={targetRouterConfig.component} />
);
} else {
// 如果路由不合法，重定向到 404 页面
return <Redirect to="/404" />;
}
}
} else {
// 非登陆状态下，当路由合法时且需要权限校验时，跳转到登陆页面，要求登陆
if (targetRouterConfig && targetRouterConfig.auth) {
return <Redirect to="/login" />;
} else {
// 非登陆状态下，路由不合法时，重定向至 404
return <Redirect to="/404" />;
}
}
}
}
export default FrontendAuth;
具体详情请看原文： https://blog.csdn.net/lllomh/article/details/106768929 |
|
|
公众号
