Navigation guards about svelte-spa-router HOT 10 CLOSED

This is something the router should handle. Why litter my app with if (!state.isLoggedIn) replace('/login')` when all i need is a before hook when a route executes. I see there is no way to do that yet?

from svelte-spa-router.

Got it. Given the high demand, I’ll look into this tomorrow. :)

from svelte-spa-router.

Glad it worked for you :)

from svelte-spa-router.

I've been thinking about this, and I believe there's a way to do this without changing the router (my goal is to keep the router as simple and lean as possible). Can you try this and let me know if it fits your needs? If it does, I'll add it to the "advanced docs".

The idea is to use the onMount hook inside Svelte components. So, in each component you want to protect, you could add:

import {push} from 'svelte-spa-router'
import {onMount} from 'svelte'
onMount(() => {
    // You can also use the replace method from the router's APIs if you prefer
    push('/forbidden')
})

There's a caveat: there's no way to actually "cancel" a navigation action, so your route will still be loaded in the DOM, before it's changed again for the /forbidden one. It sounds like your code using vue-router behaves similarly, however. It shouldn't be a problem, but you should ensure that your view that's not allowed is aware of the fact that it could be loaded in the DOM, and you should repeat the if($admin) check in there before firing any network request, for example.

from svelte-spa-router.

Actually i'm doing pretty the same thing as you did above.
The problem is when the user is on the forbidden component, he can't go back with the previous button of the browser, he is stuck. It's normal... maybe i should display the component instead of redirect to it...
But I was also very interested in that because it can be useful to avoid repetitions of such verifications in every component which needs authentification, and things like that.
But i could be wrong.
(sry for the bad english)

from svelte-spa-router.

Have you tried using the replace method rather than push? This way, the path in the browser's history is replaced rather than adding a new one, and it shouldn't lead users to redirect loops when they click the back button.

import {replace} from 'svelte-spa-router'
import {onMount} from 'svelte'
onMount(() => {
    replace('/forbidden')
})

As for repeating the code... I understand your point and it's valid - but I would prefer to keep this router minimal. Right now, it's (possibly) the smallest router for Svelte 3, with only 1 (tiny) dependency.

You could move the call to onMount(...) to a separate function and then just invoke the function in your code? I haven't tried it to make sure it works with Svelte, but it should (otherwise, you can leave the onMount invocation there, and move just the argument to a separate file). This way, you won't need to repeat the full code, and just invoke one function.

from svelte-spa-router.

Indeed the replace() method is much better for that, it solves the problem !
Forget about repetitions, i am just too lazy... I will try later maybe, but actually the router does its job well, thank you. And thanks for your answers, you can close the discussion.

from svelte-spa-router.

@TorstenDittmann following up on this thread from #38.

I've started to look into this; I had an idea on how to solve that in a clean way, but I'd first need to get something changed in the Svelte compiler. Been busy since that, but I'll look into that again soon again.

What I'd like to do is to have each Svelte component able to export an onBefore method (or something similar) that is available as a method on the component's constructor itself. At the moment, the Svelte compiler doesn't allow for that (only instances of the component can export properties or methods). This would make the cleanest solution in my mind. In fact, I'd rather not add this to the routes dictionary, so it's possible to keep each component "self-contained" and not having to refer to multiple files.

I'm open to other suggestions on how to do this cleanly and simply, however.

from svelte-spa-router.

Okay, I've never really gone deep into the subject of how guards are working. As far as I understand, you want to address a life cycle before rendering (onMount) that Svelte doesn't yet support.

I really like the idea that each component is for itself. But I prefer something more like the approach of "Router Guards" from Angular. Where you attach a "Guard service" to a route and have all the permission logic in one place that can be used modular.

from svelte-spa-router.

I think I might have found a nice solution to the problem.

CC: @TorstenDittmann @classikd @chovy would love your feedback on the design if you can please take a look to #40

from svelte-spa-router.