在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" />

　　看出什么了？两个关键词：isLogined、identity（代码并不全，主要说的是思路，请勿直接使用）。

　　isLogined判断的是是否登录，如果未登陆，<Redirect to="/login" />

　　identity === 2判断的是当前是否为货主，如果不是，<Redirect to="/carrier" />

　　只有这两个判断都满足了，才能展示当前货主所属的组件，是不是完成了所谓的路由导航守卫？

　　需要改变的是一个思想：react-router4当中，他就是组件，不满足条件的话，直接Redirect，这就是所谓的导航守卫。思想转变过来了，其实要做react-router4似乎比vue-router的导航守卫更简单一点呢！

巴特西

在react项目当中做导航守卫

最新文章

热门文章