vue-router : Navigation not routing to correct path - vue.js

I am using vuex and vue-router. I have a client's zone, when you try to loggin, you should go to the profil. But it's not happend.
routes: [
{
path: "/area-do-cliente",
name: "customerZone",
redirect: "/area-do-cliente/profile",
component: () =>
import(
/* webpackChunkName: "ClientZone" */ "#/scenes/ClientZone/views/ClientZone.vue"
),
children: [
{
path: "login",
name: "login",
component: () => import("#/scenes/ClientZone/components/LogIn.vue"),
props: true,
meta: { clientZoneLogin: true }
},
{
path: "profile",
name: "profile",
component: () => import("#/scenes/ClientZone/components/Profile.vue"),
meta: { clientZoneAuthRequired: true, clientZoneLogin: true },
props: true
},
]
}
]
router.beforeEach((to, from, next) => {
if (to.matched.some(_to => _to.meta.clientZoneLogin))
if (store.getters.personData.status == "1") {
console.log("01");
router({ name: "profile" });
} else {
console.log("2");
next();
}
} else {
console.log("3");
next();
}
}
});
So I still have in console => 2. It is mean that I pass the first condition, but I shouldnt. I have status 1, and the response of this data is when you click the login button (there is a event).
methods: {
doLogin: function() {
this.error = "";
let loginData = {
login: this.login,
password: this.password
};
this.isLoading = true;
this.errorMessage = "";
co.postLogin(loginData)
.then(data => {
this.$store.commit("personData", data.data); // here I push data to store
)}
}
}
Any ideas where is mistake?

Related

Browser back button redirecting to home page in angular 8

Browser back button is not working. It redirects me to the home page instead of going to the previous page.
e.g
http://localhost:4200/#/component1/1
http://localhost:4200/#/component2/1
http://localhost:4200/#/component3/1
When I click back button when I am in component3 it has goes to component2 instead its going to the home page. Can anyone tell me the solution to this problem?
routing.ts
{
path: 'component1/:id',
component: Component1,
canActivate: [OAuthCallbackHandlerGuard],
data: { isId: true },
},
{
path: 'component2/:id',
component: Component2,
canActivate: [OAuthCallbackHandlerGuard],
data: { isId: true },
},
{
path: 'component3/:id',
component: Component3,
canActivate: [OAuthCallbackHandlerGuard],
data: { isId: true },
},
oauthcallbackhandlerguard.service.ts
canActivate(route: ActivatedRouteSnapshot, state: RouterStateSnapshot): Observable<boolean | UrlTree> {
this.adalService.handleWindowCallback();
let engId: number = 0;
let engagementDetailId: number = 0;
if(route.data.isEngagementDetailId == true)
{
let engDetailData =this.engagementService.$engagementDetailId.subscribe((data) => {
if (data !== undefined && data !== null) {
engagementDetailId = data;
}
});
}
else
{
let engData =this.engagementService.$engagementId.subscribe((data) => {
if (data !== undefined && data !== null) {
engId = data;
}
});
}
let groupIds = JSON.parse(sessionStorage.getItem('groupids'));
return this.validateUserAccess(engId, engagementDetailId, state,groupIds);
}
private validateUserAccess(engId: number, engagementDetailId: number, state: RouterStateSnapshot,groupIds:number[]): Observable<boolean | UrlTree> {
if (engId > 0 || engagementDetailId>0) {
return this.authGuardService.validateUserAccess(engagementDetailId, engId,groupIds).map(response => {
console.log(response);
return response ? true : this.router.parseUrl('/unauthorized');
if (response) {
this.router.navigate([state.url]);
}
else {
this.redictToUnAutherized();
}
},
(error) => {
console.log('auth failed. Error ', error);
// this.redictToUnAutherized();
return false;
});
}
else {
return Observable.of(true);
}
}
private redictToUnAutherized() {
this.router.navigate(['/unauthorized']);
}
1- Run your app in diffrent browser
2- Add default routes
const routes: Routes = [
{ path: '', pathMatch: 'full', component: HomeComponent },
{
path: 'component1/:id',
component: Component1,
canActivate: [OAuthCallbackHandlerGuard],
data: { isId: true },
},
{
path: 'component2/:id',
component: Component2,
canActivate: [OAuthCallbackHandlerGuard],
data: { isId: true },
},
{
path: 'component3/:id',
component: Component3,
canActivate: [OAuthCallbackHandlerGuard],
data: { isId: true },
},
{ path: '**', component: HomeComponent }
];
3- Try to check in OAuthCallbackHandlerGuard if it is going to navigate page back and allow it with Auth
constructor (private _location: Location)
this._location.back();

VUE nested route gives the empty page

My routine returns an empty page for the children's route. Checked on the web, but can't find anything useful. I have the following setup.
Vue routes in the same index.js file
{
path: "/admin",
name: "Admin",
component: Admin,
children:[
{
path: "/scheduler",
name: "Scheduler",
component: Scheduler,
meta: {
role: "user",
middleware: [auth],
requiresAuth: true,
},
},
],
meta: {
role: "user",
middleware: [auth],
requiresAuth: true,
},
},
my beforeEach :
router.beforeEach((to, from, next) => {
if (to.matched.some((record) => record.meta.requiresAuth)) {
if (window.localStorage.getItem("token") == null) {
next({
path: "/login",
query: {
redirect: to.fullPath,
},
});
} else {
const localData = JSON.parse(window.localStorage.getItem("user")).role;
const middleware = to.meta.middleware;
const context = { to, from, next };
//If there is no error from Auth, Unauthorized
if (store.getters.errorDetails == null) {
middleware[0]({ ...context }).then(() => {
if (localData == "user" && to.meta.role == "user") {
if (to.meta.role == "admin") {
next("/user");
}
next("/user");
} else if (localData == "admin" && to.meta.role == "admin") {
if (to.meta.role == "user") {
next("/admin");
} else {
next("/admin");
}
} else {
next("/login");
}
});
}
}
} else {
next();
}
});
and I can see the following screen. Not sure what I am doing wrong. Any help is appreciated.
enter image description here

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

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();
}

aurelia redirect line gives error "ERROR [app-router] Error: Unable to find module with ID: not-found"

I have been implementing an authorization step which I modeled on THIS question's answer by fragsalat.
Everything works until it reaches the line
return new Redirect('login');
upon which I get the error:
aurelia-logging-console.js:47 ERROR [app-router] Error: Expected router pipeline to return a navigation result, but got [{"url":"login","options":{"trigger":true,"replace":true},"shouldContinueProcessing":false}] instead.
at processResult (aurelia-router.js:1761)
at aurelia-router.js:1725
at <anonymous>
I am not sure why this has not just redirected?
This is the full app.ts file so you might see the context:
import { Aurelia, PLATFORM, autoinject } from "aurelia-framework";
import {
Redirect,
NavigationInstruction,
Router,
RouterConfiguration,
Next
} from "aurelia-router";
import { AuthService } from "../../auth/auth-service";
//import { Clients } from '../../public/components/login/login'
#autoinject
export class App {
public router: Router;
private TOKEN_KEY = "session";
configureRouter(config: RouterConfiguration, router: Router): void {
this.router = router;
config.title = "Aurelia";
config.addAuthorizeStep(AuthorizeStep);
config.map([
{
route: ["", "scheduler"],
name: "scheduler",
settings: {
icon: "scheduler",
auth: true,
roles: ["Employee", "Admin"]
},
moduleId: PLATFORM.moduleName("../components/scheduler/scheduler"),
nav: true,
title: "scheduler"
},
{
route: "clients",
name: "clients",
moduleId: PLATFORM.moduleName(
"../components/clients/clientList/clientList"
),
title: "Clients",
nav: true,
settings: {
nav: [
{ href: "#clients/clientsList", title: "Client List" },
{ href: "#clients/Create", title: "Create Client" }
],
auth: true,
roles: ["Employee", "Admin"],
pos: "left"
}
},
{
route: "clients/ClientsList",
name: "clientList",
moduleId: PLATFORM.moduleName(
"../components/clients/clientList/clientList"
),
settings: {
auth: true,
roles: ["Employee", "Admin"]
}
},
{
route: "clients/create",
name: "aboutTeam",
moduleId: PLATFORM.moduleName(
"../components/clients/clientCreate/clientCreate"
),
settings: {
auth: true,
roles: ["Employee", "Admin"]
}
},
{
route: "logout",
name: "logout",
settings: {
icon: "user",
auth: true,
roles: ["Employee", "Admin"],
pos: "right"
},
moduleId: PLATFORM.moduleName("../components/auth/logout/logout"),
nav: true,
title: "Logout"
},
{
route: "not-found",
name: "not-found",
settings: {
auth: true,
roles: ["Employee", "Admin"]
},
moduleId: PLATFORM.moduleName("../components/notFound/notFound"),
nav: false,
title: "Not Found"
},
{
route: "login",
name: "login",
settings: {
icon: "user",
auth: true,
roles: ["Employee", "Admin"],
pos: "right"
},
moduleId: PLATFORM.moduleName("../../public/components/login/login"),
nav: true,
title: "login"
}
]);
config.mapUnknownRoutes("not-found");
}
}
#autoinject
class AuthorizeStep {
private endDate: any;
static loginFragment = '../../public/components/login/login';
constructor(
private authService: AuthService,
private router: Router,
private aurelia: Aurelia
) { }
run(navigationInstruction: NavigationInstruction, next: Next): Promise<any> {
return Promise.resolve()
.then(() => this.checkAuthentication(navigationInstruction, next))
.then(result => result || this.checkAuthorization(navigationInstruction, next))
.then(result => result || this.checkOrigin(navigationInstruction, next))
.then(result => result || next());
}
checkAuthentication(navigationInstruction, next) {
// Do we have a JWT?
const session = this.authService.getIdentity();
if (!session) {
this.forceReturnToPublic(next); // No JWT - back to the public root.
}
console.log("CHECKaUTHENTICATION: ", navigationInstruction.getAllInstructions().some(i => i.config.settings.auth) )
if (navigationInstruction.getAllInstructions().some(i => i.config.settings.auth)) {
// Is the token valid?
if (this.authService.hasTokenExpired(session)) {
const currentUrl = navigationInstruction.fragment + (navigationInstruction.queryString ? `?${navigationInstruction.queryString}` : '');
console.log("FRAGMENT: ", navigationInstruction.fragment);
console.log("NAVIGATE INSTRUCTION: ", navigationInstruction)
console.log('currentURL: ', currentUrl);
localStorage.setItem('origin', currentUrl);
console.log("AuthorizeStep.loginFragment", AuthorizeStep.loginFragment)
next.cancel();
console.log("and it gets here!");
return new Redirect('login');
}
}
}
checkAuthorization(navigationInstruction, next) {
var usersRole = this.authService.getUserRole();
let requiredRoles = navigationInstruction.getAllInstructions()
.map(i => i.config.settings.roles)[0];
console.log("route Roles: ", requiredRoles);
let isUserPermited = requiredRoles ? requiredRoles.some(r => r === usersRole) : true;
console.log("isUserPermited: ", isUserPermited);
if (!isUserPermited) {
this.forceReturnToPublic(next);
}
}
checkOrigin(instruction, next) {
const origin = localStorage.getItem('origin');
// Check if we were not redirected to login page and have an origin
if (instruction.fragment !== AuthorizeStep.loginFragment && origin) {
localStorage.removeItem('origin');
return next.cancel(new Redirect(origin));
}
}
forceReturnToPublic(next) {
if (localStorage.getItem('origin')) {
localStorage.removeItem('origin') // Just in case we had origin set.
}
next.cancel();
this.authService.clearIdentity();
this.router.navigate("/", { replace: true, trigger: false });
this.router.reset();
this.aurelia.setRoot("public/public/public");
}
}
In all other pipeline steps you're using return next.cancel(new Redirect()), it should be the same case, as the pipeline step expects a Next as a return value, but you return a Redirect here.
Try changing it to
return next.cancel(new Redirect('login'));