Comments (7)
Got it. I will definitely give it a try this weekend!
from routify.
Not currently. I resolve auth in App.svelte.
{#if authorized}
<Router />
{/if}
Do you have a specific use case in mind?
from routify.
How do I render my login / signup and other public pages then?
from routify.
There are a few approaches depending on the nature of your app.
If it's a strict admin dashboard
- redirect to pages/login.svelte and change the condition to
{#if authorized || ['login', 'register'].includes(location.pathname)}
- you could also just render a login page whenever a user isn't logged in, regardless of the pathname.
{#if authorized}
<Router />
{:else}
<Login>
{/if}
If only parts of your app is restricted to authorized users, like an admin module, you could include the conditional in the _layout.svelte / _reset.svelte of the module. Then any page within the module is subject to the condition.
from routify.
Thanks for the explanation.
I've been using _layout.svelte
for authn / authz logic in Sapper preload()
hook, but since we are not using Sapper, I'm not sure where to put the logic in.
Basically what I want is just some logical redirection:
- If visitor has not logged in, member-only pages will redirect to login page
- If visitor has logged in but is not admin, admin-only pages will redirect to home page
- Unknown routes redirect to fallback page (home or a custom 404)
from routify.
_layout.svelte is a confusing name at times. I would have preferred _modules.svelte, but that could be confusing to people coming from Sapper.
The most straight forward approach would be a separate module for members and admins. Ie. src/pages/admin/_layout.svelte
and src/pages/members/_layout.svelte
If you'd prefer more granularity, you could (should) authorize in App.svelte and include the user and/or user-role in the scope.
Once something is added to the scope, it's available to all components nested through router.
<!-- App.svelte-->
<script>
let user = false
authorizingScript().then((payload)=>{
user = payload.user
})
</script>
{#if user}
<Router scoped={{user}}>
{:else}
<!-- Loading animation or text -->
{/if}
<!-- src/pages/notifications/_layout.svelte-->
<script>
export let user
$: user.isGuest && history.pushState(null, null, '/login');
</script>
{#if !user.isGuest}
<-- content -->
{/if}
from routify.
For 404s, there's _fallback.svelte. You can have multiple fallbacks. Ie. src/pages/_fallback.svelte
and src/pages/admin/_fallback.svelte
. The first fallback found while traversing back through the tree is used.
from routify.
Related Issues (20)
- $params broken (search params missing) after ~v3.0.0-next.174 HOT 5
- Invalid packaging HOT 2
- $isActive {recursive: false} broken HOT 1
- Module replacement directive doesn't have any effect HOT 1
- Uncaught DOMException: Failed to execute 'replaceState' on 'History' when returning a redirect from a module HOT 2
- RouteNode typescript error when using $route.path store
- Compatibility with Vite 5 HOT 2
- v3: Inlined meta doesn't work for index files HOT 4
- v3: derived helpers became broken after svelte migration from 3.x to 4.x HOT 3
- TypeError: Function.prototype.apply was called on undefined, which is a undefined and not a function HOT 4
- Add Routify config option to preserve/strip/force the trailing slash on urls
- v3: Setting meta `title` value cause console warning HOT 2
- vite-plugin-svelte: missing exports condition warning (Routify 2.18.12) HOT 7
- Using metadata indirectly (via variable) makes goto to not work properly. HOT 5
- [Bug][Doc][v3] Invalid Url Rewrites example HOT 4
- [Bug][V3] Routify renders 404 a fraction of second when using URLRewrite HOT 10
- Vite build: missing specifier (^2.18.13) HOT 3
- Suggestion: Allow ts extension in meta files HOT 3
- After upgrading to 2.18.13 './plugins/rollup' is not defined by "exports" HOT 4
- Anchors / scroll into view HOT 3
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 routify.