Cannot get access to isAuthenticated in Vue Router using Quasar

Get Help
1

I am using latest Quasar with Vue3 and i got the login / logout actions to work.

I can access the isAuthenticated property from any view by using watch.

My issue is that the auth0 sample application proposal for Vue Router doesn’t work.

This is the default router index.js file from Quasar:

import { route } from "quasar/wrappers";
import {
  createRouter,
  createMemoryHistory,
  createWebHistory,
  createWebHashHistory,
} from "vue-router";
import routes from "./routes";

/*
 * If not building with SSR mode, you can
 * directly export the Router instantiation;
 *
 * The function below can be async too; either use
 * async/await or return a Promise which resolves
 * with the Router instance.
 */

export default route(function (/* { store, ssrContext } */) {
  const createHistory = process.env.SERVER
    ? createMemoryHistory
    : process.env.VUE_ROUTER_MODE === "history"
    ? createWebHistory
    : createWebHashHistory;

  const Router = createRouter({
    scrollBehavior: () => ({ left: 0, top: 0 }),
    routes,

    // Leave this as is and make changes in quasar.conf.js instead!
    // quasar.conf.js -> build -> vueRouterMode
    // quasar.conf.js -> build -> publicPath
    history: createHistory(process.env.VUE_ROUTER_BASE),
  });

  return Router;
});

In here i dotn have access to the Vue app instance so i cant implement the proposed code from the sample app:

import { createRouter as createVueRouter, createWebHashHistory, Router } from "vue-router";
import Home from "../views/Home.vue";
import Profile from "../views/Profile.vue";
import { createAuthGuard } from "@auth0/auth0-vue";
import { App } from 'vue';

export function createRouter(app: App): Router {
  return createVueRouter({
    routes: [
      {
        path: "/",
        name: "home",
        component: Home
      },
      {
        path: "/profile",
        name: "profile",
        component: Profile,
        beforeEnter: createAuthGuard(app)
      }
    ],
    history: createWebHashHistory()
  })
}

Any ideas?

5

Hi @e4rthdog

Thank you for posting your question on the Auth0 Community and I am sorry about the late reply to your inquiry!

I am not a quasar expert, however I believe you can get access to the Vue App instance by changing your routes array into a function like this:

export function createRouter(app: App): Router {
  return createVueRouter({
    export function routes(app: App) {
      return [
          {
          path: "/",
          name: "home",
          component: Home
          },
         {
          path: "/profile",
          name: "profile",
          component: Profile,
          beforeEnter: createAuthGuard(app) 
          }]
   }
 })
}

Hope this helps! However, I believe there are more modern implementations of Vue with Quasar now days.

If you have any other questions, feel free to leave a reply or post again on the community!

Kind Regrads,
Nik

6

This topic was automatically closed 14 days after the last reply. New replies are no longer allowed.