Pre-condition (guard) for multiple routes

[frederikhors]

@ItalyPaleAle your work is amazing! Thanks a lot.

I have read all #40 and #23: an outstanding job!

Just one question: can I avoid repeating the same wrap() pre-condition (guard) for each route?

Example:

TODAY:

import {replace} from 'svelte-spa-router'
const routes = {
  '/login': LoginForm,

  '/': wrap(Home,
    () => {
      if (!isAuthenticated) {
        return replace('/login')
      }
      return true
    }
  ),

  '/players*': wrap(Players,
    () => {
      if (!isAuthenticated) {
        return replace('/login')
      }
      return true
    }
  ),

  '/teams': wrap(Teams,
    () => {
      if (!isAuthenticated) {
        return replace('/login')
      }
      return true
    }
  ),

  '*': wrap(NotFoundPage,
    () => {
      if (!isAuthenticated) {
        return replace('/login')
      }
      return true
    }
  )
}

WHAT I NEED:

import {replace} from 'svelte-spa-router'
// Something like this:
const routes = {
  '/login': LoginForm,

  [
    '/',
    '/players*',
    '/teams',
    '*'
  ]: wrap(SOME_MAGIC,
    () => {
      if (!isAuthenticated) {
        return replace('/login')
      }
      return true
    }
  ),
}

Something like a Protected component to protect all routes.

Is there a way?

[ItalyPaleAle]

You can define a function outside and use its identifier.

For example (on my phone so forgive me for the simplified code and if there are mistakes):

const myCondition = () => {
    // do something
}

Then use myCondition as second argument for the wrap method, as many times as you want:

const routes = {
    '/something': wrap(Something, myCondition),
    '/hello': wrap(Hello, myCondition)
}

[ItalyPaleAle]

Another thing: I guess it’s fine to call “replace” within the handler itself (since it waits for the next tick), but you should still ensure you return false (or a false-y value)

[frederikhors]

First answer: I created protectedRoute(Component) helper. Thanks.

Second answer: this is something I don't understand.

What happens if I do not return false but just return replace('/login')?

[ItalyPaleAle]

Well, the condition callbacks are expected to return a Boolean indicating wether the condition succeeded. If you return a truthy value, it means the router can go ahead and inject the component in the DOM. you’re then calling replace which will replace the component on the next tick. So, you get the same result - but the unwanted component will still be injected first.

[ItalyPaleAle]

On a second though, since the replace function doesn’t have a return value, it returns undefined, which is a false-y value. So you might be ok there :) (although it’s not a documented behavior and it might change in the future)

[frederikhors]

Oh boy. Thanks, now it's clear.

I think I will go with on:conditionsFailed={conditionsFailed}.

[AxewBoTX]

Can anyone of you give the whole code this segment, like presented int he starting, but along with the solved answer?
Also I am having 1 problem.
Whenever i use replace to go to a route
The route that i choose to go to even if it has no condition at all still dont render