Quasar \ VueJS 3 infinite route looping/ - vue.js

I got some routes in my routes.js file
path: '/main',
component: () => import('layouts/MainLayout.vue'),
beforeEnter: (to, from, next) => {
console.log(store.authState.auth.role)
if (Number(store.authState.auth.role) === 4) {
next({ path: '/main/admin' })
} else {
next()
}
},
children: [
{
path: '',
component: () => import('pages/Main.vue'),
meta: { requiresAuth: true }
},
{
path: 'user',
component: () => import('pages/User.vue'),
meta: { requiresAuth: true }
},
{
path: 'admin',
component: () => import('pages/Admin.vue'),
meta: { requiresAuth: true }
}
]
}
and i have some code in index.js router file:
Router.beforeEach((to, from, next) => {
if (to.matched.some(record => record.meta.requiresAuth) && !store.authState.auth.state) {
next({ path: '/' })
} else {
next()
}
})
The main idea was - if user not login - redirect to root, if user login and go to /main route, depends on his role router must redirect him to specific route.
But in fact - i got infinite loop for role === 4 (example) - what i do wrong? Thank you

Your beforeEnter navigation guard is being applied to the entire /main route, and /main/admin is nested within that route. That means that the guard is being called on /main/admin itself, so any admin user who requests that page (or is redirected to it) will be redirected from that page to itself.
Based on your description, you probably want to apply your navigation guard to just the exact /main route and not its entire tree. You could then go on to redirect to next({ path: '/main/user' }) instead of simply accepting the current path with next() at the end of the guard. If that's what you want, then you don't actually need a component there at all, since the route will never be rendered. Here's how that would look:
path: '/main',
component: () => import('layouts/MainLayout.vue'),
children: [
{
path: '',
component: () => import('pages/Main.vue'), // FIXME: not needed?
meta: { requiresAuth: true },
beforeEnter: (to, from, next) => {
if (Number(store.authState.auth.role) === 4) {
next({ path: '/main/admin' })
} else {
next({ path: '/main/user' })
}
},
},
{
path: 'user',
component: () => import('pages/User.vue'),
meta: { requiresAuth: true }
},
{
path: 'admin',
component: () => import('pages/Admin.vue'),
meta: { requiresAuth: true }
}
]
}

Related

Vuejs stop rendering component after adding transition in vue router

Vuejs stopped rendering components after I added a transition in the children route of my dashboard layout when I checked the error there was no error and no warnings but whenever I am reloading the page the components render, and the same functionality works in the same application in my login layouts children route when I am going in the network I am getting 304 HTTP error
this is my index router
import { createRouter, createWebHistory } from "vue-router";
// importing Dashboard routes
import DashboardRoutes from "./Dashboard/index.js";
import store from "#/store/store.js";
const router = createRouter({
history: createWebHistory(),
routes: [
{
path: "/",
// redirecting the root to the login welcome page
redirect: { name: "login" },
},
{
// creating a group path for all the login pages
path: "/login",
name: "login",
redirect: { name: "welcome" },
component: () => import("../components/Pages/Login/LoginMain.vue"),
//checking the condition if user is logged in or not and redirecting
beforeEnter: (_, _2, next) => {
if (store.state.login.isLoggedIn) {
next("/dashboard");
} else {
next();
}
},
children: [
{
path: "/welcome",
name: "welcome",
component: () =>
import("../components/Pages/Login/Childrens/WelCome.vue"),
},
{
path: "/austria-login",
name: "austria-login",
component: () =>
import("../components/Pages/Login/Childrens/AustriaLogin.vue"),
},
{
path: "/sms-login",
name: "sms-login",
component: () =>
import("../components/Pages/Login/Childrens/SmsLogin.vue"),
},
{
path: "/enter-tpn",
name: "enter-tpn",
component: () =>
import("../components/Pages/Login/Childrens/EnterTpn.vue"),
//chcking the condition of phone and social security token is entered
beforeEnter: (_, _2, next) => {
if (!store.state.login.phoneVerified) {
next("/sms-login");
} else {
next();
}
},
},
],
},
// using Dashboard Routes
...DashboardRoutes,
],
scrollBehavior(_, _2, savedPosition) {
if (savedPosition) {
window.scrollTo(savedPosition);
} else {
window.scrollTo(0, 0);
}
},
});
export default router;
this is my dashboard children routes
import AppointmentRoutes from "./Appointment"; // importing appointment children routes
import SettingRoutes from "./Setting";
import store from "#/store/store";
const DashboardRoutes = [
{
// router group for all the dashboard views
path: "/dashboardMain",
name: "dashboardMain",
component: () => import("../../components/Pages/DashBoard/IndexMain.vue"),
beforeEnter: (_, _2, next) => {
if (store.state.login.isLoggedIn) {
next();
} else {
next('/login');
}
},
children: [
{
path: "/dashboard",
name: "dashboard",
component: () =>
import("../../components/Pages/DashBoard/Home/DashBoard.vue"),
props: { sidebar: true },
},
// router for appointments
{
path: "/appointments",
name: "PatientAppoinetments",
redirect: { name: "PatientAppointmentsData" },
component: () =>
import(
"../../components/Pages/DashBoard/PatientAppointment/PatientAppointment.vue"
),
props: { sidebar: true },
// children group for appointments components
children: [...AppointmentRoutes],
},
{
path: "/requests",
name: "Requests",
component: () =>
import(
"../../components/Pages/DashBoard/PatientRequests/PatientRequest.vue"
),
},
{
path: "/medications",
name: "Medications",
component: () =>
import(
"../../components/Pages/DashBoard/PatientMedication/PatientMedication.vue"
),
},
{
path: "/questions",
name: "Questions",
component: () =>
import(
"../../components/Pages/DashBoard/PatientQuestionaries/PatientQuestionaries.vue"
),
},
{
path: "/health-status",
name: "HealthStatus",
component: () =>
import(
"../../components/Pages/DashBoard/PatientHealth/PatientHealth.vue"
),
},
{
path: "/diagnostic-center",
name: "PatientDiagnosticCenter",
component: () =>
import(
"../../components/Pages/DashBoard/PatientDiagnostic/PatientDiagnosticCenter.vue"
),
},
{
path: "/vaccination",
name: "PatientVaccination",
component: () =>
import(
"../../components/Pages/DashBoard/PatientVaccination/PatientVaccination.vue"
),
},
{
path: "/setting",
name: "Setting",
redirect: { name: "AccountSetting" },
component: () =>
import("#/components/Pages/DashBoard/Setting/SettingIndex.vue"),
children: [...SettingRoutes],
},
{
path: "/chat",
name: "PatientChat",
redirect: { path: "/chat/gautam" },
component: () =>
import(
"../../components/Pages/DashBoard/PatientChat/PatientChat.vue"
),
// children group for chat page
children: [
{
path: "/chat/:name",
name: "chatMessages",
component: () =>
import(
"../../components/Pages/DashBoard/PatientChat/Children/PatientChatmessages.vue"
),
},
],
},
{
path: "/access-log",
name: "AccessLog",
component: () =>
import("#/components/Pages/DashBoard/AccessLog/AccessLog.vue"),
},
{
path: "/my-profile",
name: "MyProfile",
component: () =>
import("#/components/Pages/DashBoard/MyProfile/MyProfile.vue"),
props: { sidebar: true },
},
],
},
];
export default DashboardRoutes;
and this is DahboardMain where i want to renders my dashboard children pages
but i am getting the blank the black screen children area whenere i am going to any route except page reload
I tried to remove beforeEnter guard from the routes and I also removed all the code from the dashboard layout except router-view but still getting the black screen
enter image description here this is the image of the blank screen
enter image description here this is showing in the network

the redirect url contains the absolute and relative path while redirection from route.beforeach

In my vue js application, I have a vue-router setup as follows: In route.beforeach I am checking whether the application is already authenticated or not, base upon that I had to redirect to login page.
let router = new VueRouter({
routes: routes,
mode: "history",
scrollBehavior: () => ({ x: 0, y: 0 }),
});
Vue.use(VueGtag, {
config: { id: process.env.VUE_GTAG }
}, router);
export default router;
router.beforeEach((to, from, next) =>
{
if (to.matched.some(record => record.meta.requiresAuth) && !(authService.myMsal.getAllAccounts().length > 0))
{
next({
name: "page-login",
query: {
redirect: to.fullPath
}
});
} else
{
next()
}
});
and in route.js it is setup as:
const routes = [
{
path: '/login',
name: 'page-login',
component: Login
},
{
path: '/',
component: () => import('layouts/MyLayout.vue'),
meta: {
requiresAuth: true,
},
children: [
{
name: 'home',
path: '',
component: () => import('components/Home.vue'),
meta: {
requiresAuth: true,
},
},
],
},
]
In router.beforeEach when the application has to redirect to page-login, it is redirected with a full path as: http://localhost:8080/http:/localhost:8080/login?redirect=%2F
it should have to be redirected to http:/localhost:8080/login, what is causing this behavior?

Why does the router link not work the first time?

I have a grpc application, there is authorization. When you start a project, you must be logged in. I decided to add under the login button if you are not registered. But the router does not work. Only at the entrance, go to the registration page. Please help to understand what is the mistake? Why is seemingly blocked?
routes.js
const routes = [
{
path: "/",
component: () => import("layouts/MainLayout"),
children: [
{
path: "",
component: () => import("pages/Index"),
meta: { requireAuth: true }
},
{
path: "/logs",
component: () => import("pages/Logs"),
meta: { requireAuth: true, admin: true }
}
]
},
{
path: "/",
component: () => import("layouts/AuthLayout"),
children: [
{
path: "/welcome",
component: () => import("pages/Auth"),
meta: { guest: true }
},
{
path: "/register",
component: () => import("pages/Register"),
meta: { guest: true }
}
]
}
];
I tried many things, like in Auth.vue:
<q-item to='/register'>Sign Up</q-item>
<router-link tag="a" :to="{path:'/register'}" replace>Go</router-link>
<span #click="callSomeFunc()">Register</span>
...
methods: {
callSomeFunc() {
this.$router.push({ path: "/register" });
}
My router-view in App.vue
for more information github repo
You have duplicate routes in your config - the path / is used on 2 routes. You should fix this.
To prevent unauthorized users to see your protected pages you can add a global navigation guard to your router through the beforeEach hook:
import VueRouter from 'vue-router';
const routes = [
{
path: "/",
component: () => import("layouts/MainLayout"),
meta: { requireAuth: true },
children: [
{
path: "",
component: () => import("pages/Index"),
},
{
path: "logs",
component: () => import("pages/Logs"),
meta: { admin: true }
}
]
},
{
path: "/login",
component: () => import("layouts/AuthLayout"),
children: [
{
path: "",
component: () => import("pages/Auth"),
},
{
path: "/register",
component: () => import("pages/Register"),
}
]
}
];
const router = new VueRouter({
routes
});
router.beforeEach((to, from, next) =>
{
if (to.matched.some(route => route.meta.requireAuth))
{
if (userNotLogged) next('/login');
else next();
}
else next();
});
export default router;
You may also consider reading a more verbose tutorial, e.g. https://www.digitalocean.com/community/tutorials/how-to-set-up-vue-js-authentication-and-route-handling-using-vue-router

How to properly use the meta props on vue router?

I'm trying to handle route middleware of the children route, but I got this error
Uncaught TypeError: route.children.some is not a function
The documentation are only shows the example for a single route but in this case, I have a children route that needs to be restricted.
Please take a look at my router configuration:
import Vue from 'vue'
import Router from 'vue-router'
import store from './store/index'
import Home from './views/home/Index.vue'
Vue.use(Router)
let router = new Router({
mode: 'history',
base: process.env.VUE_APP_BASE_URL,
linkActiveClass: 'is-active',
linkExactActiveClass: 'is-exact-active',
routes: [{
path: '/',
name: 'home',
component: Home,
meta: {
requiresAuth: true
}
},
{
path: '/login',
name: 'login',
// route level code-splitting
// this generates a separate chunk (login.[hash].js) for this route
// which is lazy-loaded when the route is visited.
component: () => import('./views/auth/Login.vue'),
meta: {
requiresGuest: true
}
},
{
path: '/register',
name: 'register',
component: () => import('./views/auth/Register.vue'),
meta: {
requiresGuest: true
}
},
{
path: '/forgot-password',
name: 'forgot-password',
component: () => import('./views/auth/extras/ForgotPassword.vue'),
meta: {
requiresGuest: true
}
},
{
path: '/database',
name: 'database',
component: () => import('./views/database/Index.vue'),
meta: {
requiresAuth: true
}
},
{
path: '/third-parties',
name: 'third-parties',
component: () => import('./views/third-parties/Index.vue'),
meta: {
requiresAuth: true
}
},
{
path: '/editor',
name: 'editor',
meta: {
requiresAuth: true,
requiresAdmin: true,
requiresEditor: true,
},
children: {
path: ':appSlug/layout-editor/:pageSlug',
name: 'layout-editor',
component: () => import('./views/editor/Index.vue'),
}
},
]
})
router.beforeEach((to, from, next) => {
const isLoggedIn = store.getters['auth/isLoggedIn'];
// Role getters
const isAdmin = (store.getters['auth/isAdmin'] == 'admin') || (store.getters['auth/isAdmin'] == 'super-admin');
const isEditor = store.getters['auth/isEditor'] == 'editor';
// Redirect to the login page if the user is not logged in
// and the route meta record is requires auth
if (to.matched.some(record => record.meta.requiresAuth) && !isLoggedIn) {
next('/login')
}
// Redirect to the homepage page if the user is logged in
// and the route meta record is requires guest
if (to.matched.some(record => record.meta.requiresGuest) && isLoggedIn) {
next('/')
}
// Redirect to the preview page if the user is logged in
// but has no role assigned or the role is user
if (to.matched.some(record => (
record.meta.requiresAuth &&
record.meta.requiresAdmin &&
record.meta.requiresEditor)) && !isAdmin && !isEditor) {
next('/preview')
}
// Pass any access if not match two conditions above
next()
})
export default router
Could somebody please explain it? Why I getting this error and how to fix it?
Thanks in advance.
I just found the answer, kinda silly tho.. I forgot to put square brackets on the children props. Now it's working as I expected.
fix:
{
path: '/editor',
name: 'editor',
meta: {
requiresAuth: true,
requiresAdmin: true,
requiresEditor: true,
},
children: [{
path: ':appSlug/layout-editor/:pageSlug',
name: 'layout-editor',
component: () => import('./views/editor/Index.vue'),
}]
},

Page to route 404 with login

My problem is when I started using a router.beforeEach() he won't go to the page of 404 when I typ a not existing link. He just go to page with the defaukt layout I use. I use router.beforeEach() for checking if a user is logged in or not. Is there something missing, or is there something wrong?
This is my router.js
let router = new Router({
mode: 'history',
base: process.env.BASE_URL,
routes: [
{
path: '/',
name: 'login',
component: () => import('./views/Login.vue'),
meta: {
layout: "empty"
},
},
{
path: '/home',
name: 'home',
component: () => import('./views/Home.vue'),
meta: {
requiresAuth: true
}
},
{
path: '/404',
name: '404',
component: () => import('./views/404.vue'),
meta: {
layout: "empty"
},
},
{
path: '*',
redirect: '/404'
},
{
path: '/*',
redirect: '/404'
}
]
});
router.beforeEach((to, from, next) => {
const isLoggedIn = JSON.parse(localStorage.getItem('UH'));
console.log(isLoggedIn);
const requiresAuth = to.matched.some(record => record.meta.requiresAuth);
if (isLoggedIn === null){
if (requiresAuth && !isLoggedIn.user) {
next('/');
} else {
next();
}
} else {
next();
}
});
If I understand well your problem, when a user type something wrong in the url and is not logged in, this user is redirected to '/' instead of 404.
It's because the beforeEach hook is used before your route redirect {path: '*', redirect: '/404'} and your condition to redirect an user not logged in if the page requiresAuth is true.
To solve the problem, add an other condition like this:
if (isLoggedIn === null){
if (requiresAuth && !isLoggedIn.user) {
if (!to.matched.length) {
next('/404');
} else {
next('/');
}
} else {
next();
}
} else {
next();
}