Support Cross Cutting Concerns

[vahidvdn]

Implementing Cross-Cutting Concerns is one of the most crucial parts of any application. Here are some use case why we need them in our application.

Use Cases

• Authentication and Authorization
• Logging

Current Ways

Currently it's possible to wrap loaders to another function (e.g. a higher order function or some Policy pattern). e.g:

// wrap loader function with `requireAuth` higher-order function (just for instance)
export const loader = requireAuth(async ({ request }: LoaderFunctionArgs) => {
  // User is valid, do your stuff
})

Expected Ways

The actual Cross-Cutting Concerns are there when you literally don't need to touch your code. Here are a few reasons:

• Adding manually can be tedious and error prone
• It can leave you uncertain that all cases have been covered

High-level Solution

One possible solution could be introducing Guard which is registered globally in the app. This is the common behaviour in the NestJS or Angular world. Something like this:

@Module({
  imports: [
    ...appModules,
  ],
  controllers: [AppController],
  providers: [AppService, jwtGlobalGuard],
})
export class AppModule {}

Or in react-router-dom you could do such a thing:

<Switch>
  <Route exact path='/' component={Home}/>
  <GuardedRoute path='/protected' component={Protected} auth={isAutheticated} />
  <Route path='/unprotected' component={Unprotected} />
</Switch>

Further ideas

Any further ideas are welcome.

[sergiodxa]

Middleware support is on the roadmap (#7643) and it will allows this.