How can i set guards for all my routes? How are the best practicies?

[wilsntn]

I have a pinia store to handle authentication see bellow

when i set the Router.beforeeach function to handle if the user is authenticated or no i always get the error in line 32 of my auth store..

i think the router guard function "Router.beforeeach" runs before my router injection in my pinia store.. because of that i cant redirect my new authentications .. is there another better way to do this auth?

[TobyMosque]

move the guard to a boot:

https://github.com/TobyMosque/ws-auth-samples-frontend/blob/persist-after/src/boot/guard.ts#L6

import { boot } from 'quasar/wrappers';
import { useAuthStore } from 'src/stores/auth';

export default boot(({ store, router }) => {
  // pass the pinia intance to your store is VERY IMPORTANT
  const authStore = useAuthStore(store)
  router.beforeEach((to) => {
    if (!authStore.isLoggedIn && to.name !== "Login") {
      return { name: "Login" }
    }
  })
});

[wilsntn]

Thank you!

[adgower]

@TobyMosque this works great!

I was wondering how to implement the functions in the boot, but keep the guards on the routes file?

for example:

router.beforeEach((to) => {
    if (!authStore.isAuthenticated && to.name == "dashboard") {
      return { name: "login" };
    }
  });

I want to if route is dashboard then check auth.

On the vue router docs:

function removeQueryParams(to) {
  if (Object.keys(to.query).length)
    return { path: to.path, query: {}, hash: to.hash }
}

function removeHash(to) {
  if (to.hash) return { path: to.path, query: to.query, hash: '' }
}

const routes = [
  {
    path: '/users/:id',
    component: UserDetails,
    beforeEnter: [removeQueryParams, removeHash],
  },
  {
    path: '/about',
    component: UserDetails,
    beforeEnter: [removeQueryParams],
  },
]

So how can I alter the boot file to export 'auth' function

and then in my routes.js file, on my dashboard route: beforeEnter: [auth]

thanks for any tips!

[adgower]

#13779

I tried modifying the router/index.js

import routes from "./routes";

export default route(function ({store}) {

routes: routes(store)

Then in routes.js wrap in function:

import {authStore} from ...

export default function(store) {
... dashboard route, beforeEnter (use store check is authenticated)
}

but then for some reason it throws weird error after authentication successful and error message at same time... any tips?