在react项目当中做导航守卫

Z时代
2024-01-10
分类：综合

react

　　距离上一篇文章，似乎已经过去好久了。

　　确实是最近相对忙了一点，本身是用vue重构之前一个传统的项目，就自己一个人写。而且，在稍微闲暇之余，想着同时用react也重构一遍，也算是对react的学习吧！毕竟只有实际应用才是最好的学习方法。

　　在vue应用中，我们常常涉及到一个概念就是路由导航守卫。

　　在做用户登录确认和身份标识时，常常需要进行路由的导航守卫。

　　当前的项目需求：

　　　　用户如果想要使用我们的平台，必须进行登录，用户登录之后，依据用户身份，确认其是车主，还是货主，分别展示不同的应用内容。

　　　　所以路由导航守卫的大概是这样的：

　　　　　　在用户输入应用网址之后，先检测是否登录，如果未登录，二次跳转到登录页面，如果已经登录，那么判断用户身份，如果车主，跳转到车主对应的页面，如果是货主，跳转到货主对应的页面。

　　vue应用中，我们配置完路由之后，统一对路由进行守卫，直接上代码吧！

router.beforeEach((to, from, next) => {
  NProgress.start()
  let identity = parseInt(localStorage.getItem('identity'), 10)
  if (whiteList.indexOf(to.path) !== -1) {
    next()
  } else {
    if (identity) {
      identity = identity === 2 ? 'shipper' : identity === 1 ? 'carrier' : ''
      // console.log('permission:', to.path, to.path.includes(identity))
      if (to.path.includes(identity)) {
        next()
      } else {
        next({
          name: identity,
          replace: true
        })
      }
    } else {
      next(`/login?redirect=${ to.path }`)
      NProgress.done()
    }
  }
})
router.afterEach((to, from) => {
  if (whiteList.indexOf(to.path) !== -1) {
    store.dispatch('fedLogOut')
    let identity = localStorage.getItem('identity')
    if (identity) localStorage.setItem('identity', null)
  }
  // finish progress bar
  NProgress.done()
})

　　在router.beforeEach中，第一个if判断的是，如果当前用户直接输入的是类似于login、registe这些页面，在直接利用next()跳转到用户输入的页面。

　　第二个if (identity)判断的是用户是否已经登录了，如果不存在identity，也就是用户未登录，利用next(`/login?redirect=${ to.path }`)跳转到login页面。

　　第三个if (to.path.includes(identity))判断的是用户输入的网址和其身份标识是否匹配，如果是车主，输入的网址是属于货主的，就重定向到车主所属页面。

　　这一整个流程下来，就完成了路由的导航守卫。

　　然而，当使用react进行重构的时候，发现一个尴尬的事情，react应用中，react-router4似乎并没有提供上述类似的api供我们进行路由守卫，然而路由的导航守卫又必须要做，总不至于刚刚开始项目就这么夭折吧！这其中寻找react-router4的导航守卫过程，就不细说了，说多了都是泪啊。只说结果：react-router4就是以组件的方式提供的导航，他所有的类似于<Route/> <Link/>等等，都是组件。然后，想到什么了？

　　来吧！

　　当然：（路由怎么配置就不说了）与之前一样，类似于login、register的页面不需要任何守卫，直接进入就好了。需要守卫的是当用户进入车主和货主的页面时。

　　上代码吧！

const { isLogined, identity } = this.state
    return isLogined ?
      (identity === 2 ?
        (<Spin spinning={this.props.loading}><Layout>
          <Header className="header">
            <div className="enterprise">南京星通北斗哦</div>
            <Navbar />
            <UserInfo className="userinfo" />
          </Header>
          <Content className="container">
            <Switch>
              {
                Shippers.map(route => {
                  return <Route path={"/shipper/" + route.path} component={route.component} key={route.path} />
                })
              }
              <Route path={"/" || "/shipper/*"} render={() => (
                <Redirect to="/shipper/home" />
              )} />
            </Switch>
          </Content>
        </Layout></Spin>) :
        <Redirect to="/carrier" />) :
      <Redirect to="/login" />