Comments (10)
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.
Related Issues (20)
- Nested routes as maps HOT 1
- If I want to go to the login page in the sidebar + SPA form, is it possible with route guard? HOT 4
- Is this not possible in routeLoaded? HOT 5
- What is the black bar in this image? HOT 2
- Feature request: Svelte 4 support HOT 13
- FEATURE REQUEST: pass next() in precondition to decide whether the router should *change* the current route HOT 1
- Load user data HOT 4
- How to check hash-bashed history HOT 1
- Is there an alternative to the "Failed to fetch dynamically import problem" issue in Vite + Svelte spa environment? HOT 1
- WARNING: The following packages have a svelte field in their package.json but no exports condition for svelte. [email protected] HOT 8
- Typescript problematic types after "wrapping" the route HOT 2
- navigating within same component does not work HOT 5
- Typescript support: Package path ./wrap is not exported from package svelte-spa-router HOT 2
- Will the library support Svelte 5? HOT 6
- Authentication and Authorization HOT 6
- Layouts not exists for svelte-spa-router? HOT 6
- Feature request: Nested route priority HOT 1
- children router bug HOT 2
- <Pages> was created with unknown prop 'params' HOT 4
- Typescript complaining about `Type 'WrappedComponent' is not assignable to type 'typeof SvelteComponent<any>'.ts(2322)` HOT 2
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from svelte-spa-router.