[Feature]: Routing guards support

[savanrajkotiya]

Solid-router doesn't have feature currently to declare and configure routing guards functions for different routes while defining at root level of the application like angular routing guards.

• this will be helpful when application needs protected routes configuration.

[puneetxp]

I have working model for that but don't have any work with github public project like and work with community that so not better with it may be you can help me.
I try to sync with main without destroying and destroy my fork and created #257 but that is unintentional and now first i have to fix many thing there and fix everything test everything. Any help appreciated.
I also have to understand what is happening in router it will take little bit more time. As last version i work is v0.5. So New pull request will be coming soon. as first we have better create case for it.
Reason to merge is can't maintains a new solid router because i want some more features.

[NotAsea]

I just stomp upon this when doing authentication for solidjs, look like route guard is something we only hope for future. In now react, vue or angular is likely better option

[ryansolid]

To be fair there are other ways to accomplish this using data functions and conditionals.

The challenge with route guards is their async nature playing well with Suspense. This has reprocussions on SSR and Transitions. It is possible the application of the URL is at the wrong time. But ideally we don't block and leave that to user code, and the same data loading checks would double as route guards. This reduces flows down to a single path and doesn't introduce a new concept.

[puneetxp]

Thanks Ryan for this software I created a fork with said feature https://github.com/puneetxp/solid-router.
I need it so I built it it can be rough just gave a try.
I understand as solidjs is backend first but my/other need is spa first. Hop People found it helpful.

[ryansolid]

Solid isn't backend first. What I'm talking about is as relevant for client-rendered SPAs. We need to do a better job documenting and distilling best practices. The problem we are solving is related to handling of async in general. I'm not rushing to implement the types of guards people are asking for because I think they are generally incompatible and will only be more evidently so as more libraries follow best practices.

[puneetxp]

@ryansolid My bad about that comment i think because.

This has repercussions on SSR and Transitions.

I see the issue for backend there I create it anyway. Maybe something can usable.

let me give a small summery.

I introduced guard

export interface key_guard {
  guard?: Accessor<string | false>;
}

On Outlet I change function

export const Outlet = () => {
  const route = useRoute();
  return (
    <Show when={route.child} keyed>
      {child => <RouteContextObj.Provider value={child}>
{child.guard && child?.guard() && Navigate({ href: child.guard().toString()}) || child.outlet()}
</RouteContextObj.Provider>}
    </Show>
  );
};

Same on root also.

const notLogin: Accessor<string | true> = createMemo(() => {
  if (JSON.parse(JSON.stringify(LoginService.get())).login != false) { return '/' }
  return true;
});
export const isbook = (book_id: string) =>
  createMemo(() => {
    if (books().find((i) => i.id == Number(book_id))) {
      return false;
    }
    return "/book";
  });
const App: Component = () => {
  return (
    <>
      <Router>
        <Routes>
          <Route path='/' component={Public_Layout}>
            <Route path='' component={HomePage} />
            <Route path='login/' guard={notLogin} component={Login_Page} />
            <Route path='register/' guard={notLogin} component={RegisterPage} />
            <Route path={'/book'}>
              <Route path={"/:book_id"} guard={isbook(useParams().book_id)}/>
            </Route>
          </Route>
        </Routes>
      </Router>
    </>
  );
};

Can it compatible? I don't have much experience so pardon me. I like to contribute something to project like this.
New GitHub repository with 0 start is nothing compare to a contribution to big project like solid-router.

Finally create a sin making a new npm lib. It work with memo.

I Like for any direction and hoping for best check my repo if it peeked interest https://github.com/puneetxp/solid-router

[sysmat]

• Yes guard func is a must feature , like a filter on http is must feature

[manast]

Either a feature or a well-documented recipe, as it seems quite counterproductive if every user needs to reinvent the wheel to accomplish this feature that is in principle needed for all apps. Maybe if anybody has already a working pattern that they are happy with it could be pasted here as a starting point...

[sysmat]

• for me very well design router guards are in angular, with CanActivate, CanActivateChild, CanDeactivate, Resolve, CanLoad
• angular has Functional guards which are composable