How to add landing page to Vue app secured by Keycloak

Question

I have a Vue app that is secured by Keycloak. If user is not authenticated with Keycloak then every request is being redirected to Keycloak login and after a successful login the user is redirected to the desired page.

My question is: How can I make a landing page so that for example if user goes to http://localhost:9000/products if he is authenticated a products page is presented to him, and if he is not authenticated he is redirected to http://localhost:9000/home where there is a login button that will then redirect him to keycloak login page?

Here is the current code (note: I'm using Quasar Framework, so the code is inside a boot file):

Note: the 192.168.0.105 address is also localhost. I need that to be like that for other reasons (Android emulator and KC config (redirect URIs, etc...)).

import {boot} from 'quasar/wrappers'
import Keycloak from "keycloak-js";

// "async" is optional;
// more info on params: https://v2.quasar.dev/quasar-cli/boot-files

const keycloak = new Keycloak({
  url: "http://192.168.0.105:8080/auth",
  realm: "my-app-realm",
  clientId: "eo-fe-client",
  onLoad: "login-required"
});

export default boot(async ({urlPath, router}) => {
  keycloak.init({
    onLoad: "login-required",
    checkLoginIframe: false,
    redirectUri: "http://192.168.0.105:9000" + urlPath
  })
    .then((auth) => {
        if (!auth) {
          window.location.reload();
        } else {
          setInterval(() => {
            keycloak.updateToken(70).then((refreshed) => {
              if (refreshed) {
                console.log("Access token refreshed!");
              }
            }).catch(() => {
              console.err("Failed to refresh auth token!");
            });
          }, 60000)
        }
      },
      err => {
        console.log(keycloak);
      })
});
export {keycloak}