beforeNavigate cancel and redirect

[HenrijsS]

I'm wondering, how can I check for a token and redirect the client?
My site will be fully static so all content fetching will be onMount, but I was wondering, how can I still block access to certain pages?

Here's my code now which triggers an infinite loop, because the goto will trigger another beforeNavigate and so on.

beforeNavigate(({ cancel }) => {
  if (!localStorage.getItem("token")) {
	  cancel();
	  goto("/panel/login");
  }
});

[stephane-vanraes]

You can do this in the load function:

<script context="module">
  import { browser } from '$app/env';
  export async function load() {
     if (browser && !localStorage.getItem('token')) {
	return {
	   status: 302,
	   redirect: '/'
	};
    }
    return {};
  }
</script>

[biaocy]

You need to check whether the path is trying to access the protected pages, like

beforeNavigate(({ to, cancel }) => {
  if (to?.pathname.startsWith('/<protected url>') && !localStorage.getItem("token")) {
	  cancel();
	  goto("/panel/login");
  }
});

So, the goto("/panel/login") will not redirect again.
But there's a short period of time the protected page will display before beforeNavigate trigger.