【个人笔记】Vue和React的简单路由拦截

最新推荐文章于 2024-06-23 13:12:36 发布

divergent_l

最新推荐文章于 2024-06-23 13:12:36 发布

阅读量216

点赞数

分类专栏：个人笔记

本文链接：https://blog.csdn.net/qq_35217902/article/details/103571277

版权

个人笔记专栏收录该内容

14 篇文章 1 订阅

订阅专栏

之前一直基本都是用Vue开发，后来有几个项目改用React，实话说React做图表类后台监控确实真香，组件开发和Jsx语法也有点香的味道，不过相比之下。React的路由就没有Vue的舒服。

React-router不像Vue-router那样简便，很多东西需要自行去写，也没有提供类似于router-beforeEach的路由守卫，而React要实现路由守卫需要自己去写，基于我的项目我发现了一种比较简单的方式

//先介绍我的React路由配置
/router/index.js
<Router history={createBrowserHistory()}>
    <Switch>
        <Route exact path='/' component={Login}></Route>
        {
            routermap.map(item=>{                       //routermap根据你的实际路由去写
                return(
                    <Route path={item.path} render={()=>
                        sessionStorage.getItem('user')?<Content path={item.path} component={item.val} />:<Redirect to ="/"/>                         //我是使用了sessionStorage暂存了一个登录标记，Content是一个公用组件（例如：可以是你的导航栏之类的，公用组件内包含着你的内容，内容根据路由跳转而变化，这样基本就可以形成一个路由的拦截）
                        } 
                    />
                )
            })
        }
        
    </Switch>
</Router>

//在Content组件内
<Content style={{height:'100%',width:'100%',background:'#1B2426'}}>
    <Route exact path='/Monitor' component={Monitor}></Route>
    <Route exact path='/Device' component={Device}></Route>
</Content>                //这是内容配置
//还需要引入withRouter，这个是把你的组件包裹在Route里面，如果不配置，例如this.props.location.pathname这个值就取不到的，然后在componentWillUnmount中把sessionStorage清除掉，这样你回去登录页就没办法返回了

//而vue-router就简单很多了，在Main.js里面
router.beforeEach((to, from, next) => { // 路由守卫
    if (to.meta.requiresAuth) {
        var name = sessionStorage.getItem('loginname');
        if (name) {
            next();
        } else {
            next();
        }
    } else {
        next();
    }
    if (from.name == 'Login' && name == null || from.name == '*' && name == null) {
        next('/')
    }
    if (to.name == 'Login' && name || from.name == '*' && name) {
        sessionStorage.removeItem('loginname')
        next('/')
    }
})

vue 的路由拦截提供了api简单很多，但是写起来感觉就没有react配的高大上了。。。