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

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

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

//先介绍我的React路由配置
/router/index.js

    
        
        {
            routermap.map(item=>{                       //routermap根据你的实际路由去写
                return(
                    
                        sessionStorage.getItem('user')?:                         //我是使用了sessionStorage暂存了一个登录标记，Content是一个公用组件（例如：可以是你的导航栏之类的，公用组件内包含着你的内容，内容根据路由跳转而变化，这样基本就可以形成一个路由的拦截）
                        } 
                    />
                )
            })
        }
        
    

//在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配的高大上了。。。