0

Good morning community

I am new to micro frontend, currently I am building an application where all the microfrontends are made in angular and i am using the single-spa plugin to display them.

What I want is that if the user is authenticated, load the other microfrontends and if not, redirect him back to the login microfrontend, but I haven't been able to do it.

My root config file is as follows

This loads the login screen

registerApplication({
  name: "@app/login",
  app: () => System.import<LifeCycles>("@app/login"),
  activeWhen: location => location.pathname == '/',
});

This route loads a dashboard, but if the user has not authenticated it should not load it and redirect to login

registerApplication({
  name: "@app/dashboard",
  app: () => System.import<LifeCycles>("@app/dashboard"),
  activeWhen: location => location.pathname == '/dashboard'
});
damanchola
  • 5
  • 2

1 Answers1

0

There are a few ways to control micro-frontend loading. For example, the function that you put in activeWhen can have complex logic. In this function, you may check whether the user is authenticated and disallow (return false) the mife to load.

Another way to disallow a specific mife is to not register it until after the desired condition has been met. In your case, only register the login mife at the beginning, and only register the rest once the user authenticates.

Finally, especifically for your question: All you have to do is redirect the user to the homepage for the homepage mife to be loaded and the dashboard mife to be unloaded. Is this not working for you?

José Ramírez
  • 872
  • 5
  • 7