Create AllowRoutes.js

[jonlovera]

Hello everyone!

I'm currently working in some authentification ith hyperapp and I needed to allow routes depending on an if statement and redirect if its false. I wrote this util for me, maybe should we add it to the router so anyone could easily import it.

The example usage will be:

<AllowRoutes if={!auth.user}>
    <Route path="/auth/login" render={Login(state, actions)}/>
    <Route path="/auth/signup" render={Signup(state, actions)}/>
</AllowRoutes>

and if you would like to redirect if the condition is not meet:

<AllowRoutes if={auth.user} redirectTo="/auth/login">
    <Route path="/auth/logout" render={Logout(state, actions)}/>
    <Route path="/user/settings" render={UserSettings(state, actions)}/>
</AllowRoutes>

Hope is helpful

[jorgebucaran]

Hi, @jonlov. Do you know how ReactRouter handles this kind of thing?

[codecov[bot]]

Codecov Report

Merging #49 into master will not change coverage. The diff coverage is n/a.

@@           Coverage Diff           @@
##           master      #49   +/-   ##
=======================================
  Coverage   41.81%   41.81%           
=======================================
  Files           6        6           
  Lines          55       55           
  Branches       13       13           
=======================================
  Hits           23       23           
  Misses         23       23           
  Partials        9        9

---

Continue to review full report at Codecov.

Legend - Click here to learn more Δ = absolute <relative> (impact), ø = not affected, ? = missing data Powered by Codecov. Last update 48d81a0...84cbb48. Read the comment docs.

[jonlovera]

@jorgebucaran they don't have any module to allow a route. You need to do it manually for each component or create a wrapper like this.

I'm not sure why they don't create a module for this. I always need to create it.

[jorgebucaran]

@jonlov Where do we draw the line? I feel this module is very opinionated already. If you can solve this problem in userland, then let's solve it in userland.

[jonlovera]

@jorgebucaran It's optional, I shared here because I think is very helpful when doing routing permissions. It won't hurt anyone to have it ready to use but if not then we could just create another package just for this little feature.

[jorgebucaran]

@jonlov Maybe hyperapp-router-extras if you plan to add a lot of stuff.

[jonlovera]

@jorgebucaran yes could be. That's the thing. I don't think there is much stuff for routes. However, I'm kind thinking to create a package for login/signup/forgot-password for passportJS with hyperapp and I guess I could add it there. It feels like is more for permissions on the routes.

On the other hand, ReactRouter has a Prompt module. Which I think is very optional as well, but they add it anyways. I never used before.

[jorgebucaran]

@jonlov What do you mean by optional? Every module is optional.

[jonlovera]

@jorgebucaran opinionated*

[jorgebucaran]

@jonlov What if we add a section to the documentation in the mean time?

The router is going to get a makover someday soon after hyperapp/hyperapp#606.

[jonlovera]

@jorgebucaran sure let's add a section to the documentation then. I think this can also solve #34. What do you think? It's not a before/after Router hooks, but it's an implementation how you could intercept the routes.