Struggling with Navigation Guard integration in a Vue 3 + Quasar + TypeScript application

Question

Struggling with Navigation Guard integration in a Vue 3 + Quasar + TypeScript application

Currently, I am developing an application using the Quasar Framework in conjunction with Vue 3 and TypeScript, specifically utilizing the Composition API. My objective is to incorporate a Navigation Guard within my routes.ts file for handling route authentication. However, during this process, I've encountered the following error:

ERROR in src/router/index.ts:26:5
TS2740: Type 'Router' is missing the following properties from type 'readonly RouteRecordRaw[]': length, concat, join, slice, and 16 more.
    24 |   const Router = createRouter({
    25 |     scrollBehavior: () => ({ left: 0, top: 0 }),
  > 26 |     routes,
       |     ^^^^^^
    27 |
    28 |     // Leave this as is and make changes in quasar.conf.js instead!
    29 |     // quasar.conf.js -> build -> vueRouterMode

Here are the steps I have taken so far:

I initially followed the standard Vue 3 documentation to set up the Navigation Guard.
Upon encountering the error, I tried modifying the vueRouterMode in the quasar.config.js file to 'history' from 'hash', based on recommendations from various forums.
I also double-checked for any typos or misconfigurations in my code and ensured that all dependencies are up to date.
Despite these efforts, the error persists, even though I anticipated that changing the vueRouterMode or reviewing the code for errors would resolve the issue.

routes.ts

...

auth-store.ts

...

src/router/index.ts

...

typescript vuejs3 vue-router vue-composition-api quasar-framework

Answer 1

Answer №1

It appears that the router is being created twice, once in index.ts and again in routes.ts. To streamline this process, I recommend consolidating the creation of the router within index.ts and simply adding the guard there. Remove the following code from routes.ts, leaving only routes:

const router = createRouter({
  history: createWebHistory(),
  routes,  // This is correct
});

router.beforeEach((to, from, next) => {
  const auth = useAuthStore();

  if (to.matched.some(record => record.meta.requiresAdmin)) {
    if (auth.isAdminUser) {
      next();
    } else {
      next('/');
    }
  } else {
    next();
  }
});

Then, include the following code in index.ts:

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,

    history: createHistory(
      process.env.MODE === 'ssr' ? void 0 : process.env.VUE_ROUTER_BASE
    ),
  });

  Router.beforeEach((to, from, next) => {
    const auth = useAuthStore();

    if (to.matched.some(record => record.meta.requiresAdmin)) {
      if (auth.isAdminUser) {
        next();
      } else {
        next('/');
      }
    } else {
      next();
    }
  });

  return Router;
});

Answer 2

It appears that the router is being created twice, once in index.ts and again in routes.ts. To streamline this process, I recommend consolidating the creation of the router within index.ts and simply adding the guard there. Remove the following code from routes.ts, leaving only routes:

const router = createRouter({
  history: createWebHistory(),
  routes,  // This is correct
});

router.beforeEach((to, from, next) => {
  const auth = useAuthStore();

  if (to.matched.some(record => record.meta.requiresAdmin)) {
    if (auth.isAdminUser) {
      next();
    } else {
      next('/');
    }
  } else {
    next();
  }
});

Then, include the following code in index.ts:

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,

    history: createHistory(
      process.env.MODE === 'ssr' ? void 0 : process.env.VUE_ROUTER_BASE
    ),
  });

  Router.beforeEach((to, from, next) => {
    const auth = useAuthStore();

    if (to.matched.some(record => record.meta.requiresAdmin)) {
      if (auth.isAdminUser) {
        next();
      } else {
        next('/');
      }
    } else {
      next();
    }
  });

  return Router;
});

Struggling with Navigation Guard integration in a Vue 3 + Quasar + TypeScript application

Answer №1

Similar questions

405 we're sorry, but the POST method is not allowed on this page. This page does

Transferring dynamic parameters from a hook to setInterval()

Performing a conditional query on a Many-to-Many relationship in TypeORM

Error in GoogleMapReact with Next.js: TypeError occurs when trying to read properties of undefined, specifically 'getChildren'

In Typescript, it is not possible to utilize numbers or arrays within URLSearchParams

Error encountered in Angular 2 due to an unexpected token

How can I create an input field in MUI that restricts input to letters, numbers, and dashes

Is it necessary for 'ts-loader' to have 'typescript' installed in order to function properly? I personally did not encounter any issues with this

Improving the structure of destructured props by including type annotations. TypeScript implementation in React with Redux. Error code TS

Issue with Memory Deallocation in Rust WebAssembly Custom Elements

Using Angular 8, remember to not only create a model but also to properly set it

The issue of HTTP parameters not being appended to the GET request was discovered

Disabling a specific tab in an array of tabs using Angular and Typescript

Dependencies exclusively for NPM post-installUnique Rewrite: "N

Creating the data type for the input file's state: React with Typescript

A generic function in Typescript that can accept an object with the first argument as a specified key

React Error: Attempting to access the 'style' property of an undefined object

Is there a way to establish a "transient" category within a category to maintain code efficiency?

Encountering syntax errors with CommonJS Rollup plugin when attempting to import third-party libraries, particularly those involving the 'process' module

Insert items into an array at a specific index in typescript