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?
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
In my app I have a registred area, when you login successfully a global variable "auth" will take the value loggedin, in my main vue component App.vue I load the header component which include the navbar and the router view
I call the created function in the header component to read the value of "auth" to show the login link and hide the profile,chat and logout links
I also want to use the sema method in some router views (char and profile) to prevent the user to get acces to them and push the router to the login page when the "auth" variable is not loggedin.
In that case, the App.vue have to run the created function twice, the header component reads correctly the value of "auth" while the router view does not.
Is there any solution to do that? or any alternative to prevent the access to the registred area without login ?
update
I have tried vuex and I got this error (Cannot read property 'commit' of undefined)
and the store.state.auth still have the value of false
this is my login component
<script>
/* eslint-disable */
import axios from 'axios'
import router from '../router'
import EventBus from './EventBus.vue'
export default {
data () {
return {
email: '',
password: '',
error: ''
}
},
methods: {
login () {
axios.post('users/login', {
email: this.email,
password: this.password
}).then(res => {
console.log('user exist ')
localStorage.setItem('usertoken', res.data)
this.email = ''
this.password = ''
router.push({ name: 'Profile' })
this.$store.commit('login') // sets auth to true
this.emitMethod()
}).catch(err => {
console.log(err.message)
this.error = ('User does not exist ')
this.email = ''
this.password = ''
})
},
onReset(evt) {
evt.preventDefault()
// Reset our form values
this.email = ''
this.password = ''
// Trick to reset/clear native browser form validation state
this.show = false
this.$nextTick(() => {
this.show = true
})
},
emitMethod () {
EventBus.$emit('logged-in', 'loggedin')
}
}
}
</script>
and here is main.js
import Vue from 'vue'
import VueRouter from 'vue-router'
import Home from '../views/Home.vue'
import AllIosIcon from 'vue-ionicons/dist/ionicons-ios.js'
import Vuex from 'vuex'
/* eslint no-console: ["error", { allow: ["warn", "error"] }] */
Vue.use(Vuex)
Vue.use(AllIosIcon)
Vue.use(VueRouter)
const store = new Vuex.Store({
state: {
auth: false
},
mutations: {
login: (state) => state.auth = true,
logout: (state) => state.auth = false
}
})
const routes = [
{
path: '/',
name: 'home',
component: Home
},
{
path: '/products',
name: 'products',
component: () => import( '../views/Products.vue')
},{
path: '/spareParts',
name: 'spareParts',
component: () => import( '../views/SpareParts.vue')
},
{
path: '/contact',
name: 'contact',
component: () => import( '../views/Contact.vue')
},
{
path: '/login',
name: 'login',
component: () => import( '../views/logIn.vue')
},
{
path: '/About',
name: 'About',
component: () => import( '../views/About.vue')
},
{
path: '/Profile',
name: 'Profile',
component: () => import( '../views/Profile.vue'),
meta: {
requiresAuth: true
}
},
{
path: '/Chat',
name: 'Chat',
component: () => import( '../views/Chat.vue'),
meta: {
requiresAuth: true
}
},
{
path: '/Spare1',
name: 'Spare1',
component: () => import( '../views/Spare1.vue')
},
{
path: '/spare2',
name: 'spare2',
component: () => import( '../views/spare2.vue')
},
{
path: '/spare3',
name: 'spare3',
component: () => import( '../views/spare3.vue')
},
{
path: '/spare4',
name: 'spare4',
component: () => import( '../views/spare4.vue')
},
{
path: '/spare5',
name: 'spare5',
component: () => import( '../views/spare5.vue')
},
{
path: '/spare6',
name: 'spare6',
component: () => import( '../views/spare6.vue')
},
{
path: '/spare7',
name: 'spare7',
component: () => import( '../views/spare7.vue')
},
{
path: '/spare8',
name: 'spare8',
component: () => import( '../views/spare8.vue')
},
{
path: '/spare9',
name: 'spare9',
component: () => import( '../views/spare9.vue')
},
{
path: '/spare10',
name: 'spare10',
component: () => import( '../views/spare10.vue')
},
{
path: '/spare11',
name: 'spare11',
component: () => import( '../views/spare11.vue')
},
{
path: '/spare12',
name: 'spare12',
component: () => import( '../views/spare12.vue')
},
{
path: '/spare13',
name: 'spare13',
component: () => import( '../views/spare13.vue')
},
{
path: '/spare14',
name: 'spare14',
component: () => import( '../views/spare14.vue')
},
{
path: '/spare15',
name: 'spare15',
component: () => import( '../views/spare15.vue')
},
{
path: '/spare16',
name: 'spare16',
component: () => import( '../views/spare16.vue')
},
{
path: '/spare17',
name: 'spare17',
component: () => import( '../views/spare17.vue')
},
{
path: '/spare18',
name: 'spare18',
component: () => import( '../views/spare18.vue')
},
{
path: '/spare19',
name: 'spare19',
component: () => import( '../views/spare19.vue')
},
{
path: '/spare20',
name: 'spare20',
component: () => import( '../views/spare20.vue')
},
{
path: '/spare21',
name: 'spare21',
component: () => import( '../views/spare21.vue')
},
{
path: '/spare22',
name: 'spare22',
component: () => import( '../views/spare22.vue')
},
{
path: '/spare23',
name: 'spare23',
component: () => import( '../views/spare23.vue')
},
{
path: '/product1',
name: 'product1',
component: () => import( '../views/product1.vue')
},
{
path: '/freezer',
name: 'freezer',
component: () => import( '../views/freezer.vue')
},
{
path: '/construction',
name: 'construction',
component: () => import( '../views/construction.vue')
},
{
path: '/product2',
name: 'product2',
component: () => import( '../views/product2.vue')
},
{
path: '/earth',
name: 'earth',
component: () => import( '../views/earth.vue')
},
{
path: '/crawler',
name: 'crawler',
component: () => import( '../views/crawler.vue')
},
{
path: '/articulated',
name: 'articulated',
component: () => import( '../views/articulated.vue')
},
{
path: '/wheel',
name: 'wheel',
component: () => import( '../views/wheel.vue')
},
{
path: '/tractor',
name: 'tractor',
component: () => import( '../views/tractor.vue')
},
{
path: '/telescopic',
name: 'telescopic',
component: () => import( '../views/telescopic.vue')
},
{
path: '/loader',
name: 'loader',
component: () => import( '../views/loader.vue')
},
{
path: '/pipe',
name: 'pipe',
component: () => import( '../views/pipe.vue')
},
{
path: '/pontoon',
name: 'pontoon',
component: () => import( '../views/pontoon.vue')
},
{
path: '/duty',
name: 'duty',
component: () => import( '../views/duty.vue')
},
{
path: '/attachment',
name: 'attachment',
component: () => import( '../views/attachment.vue')
},
{
path: '/customer',
name: 'customer',
component: () => import( '../views/customer.vue')
},
{
path: '/side',
name: 'side',
component: () => import( '../views/side.vue')
},
{
path: '/wine',
name: 'wine',
component: () => import( '../views/wine.vue')
},
{
path: '/accessories',
name: 'accessories',
component: () => import( '../views/accessories.vue')
},
{
path: '/hotel',
name: 'hotel',
component: () => import( '../views/hotel.vue')
},
{
path: '/bakery',
name: 'bakery',
component: () => import( '../views/bakery.vue')
},
{
path: '/retail',
name: 'retail',
component: () => import( '../views/retail.vue')
},
{
path: '/industry',
name: 'industry',
component: () => import( '../views/industry.vue')
},
{
path: '/mining',
name: 'mining',
component: () => import( '../views/mining.vue')
},
{
path: '/mobile',
name: 'mobile',
component: () => import( '../views/mobile.vue')
},
{
path: '/material',
name: 'material',
component: () => import( '../views/material.vue')
},
{
path: '/maritime',
name: 'maritime',
component: () => import( '../views/maritime.vue')
},
{
path: '/aero',
name: 'aero',
component: () => import( '../views/aero.vue')
},
{
path: '/gear',
name: 'gear',
component: () => import( '../views/gear.vue')
},
{
path: '/combust',
name: 'combust',
component: () => import( '../views/combust.vue')
},
{
path: '/hotelgroup',
name: 'hotelgroup',
component: () => import( '../views/hotelgroup.vue')
},
{
path: '/deep',
name: 'deep',
component: () => import( '../views/deep.vue')
},
{
path: '/tower',
name: 'tower',
component: () => import( '../views/tower.vue')
},
{
path: '/concrete',
name: 'concrete',
component: () => import( '../views/concrete.vue')
},
{
path: '/problem',
name: 'problem',
component: () => import( '../views/problem.vue')
}
]
const router = new VueRouter({
routes // short for routes: routes
})
router.beforeEach((to, from, next) => {
console.error(store.state.auth)
if (to.meta.requiresAuth && !store.state.auth) {
// this route requires auth, check if logged in
// if not, redirect to login page.
next({ name: 'login' })
} else {
next() // does not require auth, make sure to always call next()!
}
})
export default router; store
updated
main.js
import Vue from 'vue'
import App from './App.vue'
import router from './router'
import BootstrapVue from 'bootstrap-vue'
import 'bootstrap/dist/css/bootstrap.css'
import 'bootstrap-vue/dist/bootstrap-vue.css'
import AllIosIcon from 'vue-ionicons/dist/ionicons-ios.js'
import i18n from './i18n'
import store from './router'
Vue.use(AllIosIcon)
Vue.use(BootstrapVue)
Vue.config.productionTip = false
new Vue({
router,
i18n,
store,
render: h => h(App)
}).$mount('#app')
now I got this error
_this.$store.commit is not a function
In my opinion, the best way to handle this is to use vuex for state management and vue-router's navigation guards.
Look at the code below to understand how this might be done.
main.js
import Vue from 'vue'
import Vuex from 'vuex'
import VueRouter from 'vue-router'
Vue.use(Vuex)
Vue.use(VueRouter)
const store = new Vuex.Store({
state: {
auth: false
},
mutations: {
login: (state) => state.auth = true,
logout: (state) => state.auth = false
}
})
const router = new VueRouter({
mode: 'history',
routes: [
{
path: '/dashboard',
component: Dashboard,
name: 'dashboard',
meta: {
requiresAuth: true
}
},
{
path: '/login',
component: Login,
name: 'login',
},
]
})
router.beforeEach((to, from, next) => {
if (to.meta.requiresAuth && !store.state.auth) {
next({
path: '/login',
query: {
redirectTo: to.path
}
})
}
next()
})
const app = new Vue({
el: '#app',
store,
router
})
What we are doing here is setting up a central source of truth for the auth status of a user. The beforeEach navigation guard is run before entering a route. In this case we are checking if the route requires authentication (using the requiresAuth metadata). If the route requires authentication and you're not logged in, it will redirect you to a login page.
Your login page, should have logic that logs in the user and sets the authentication state to true.
Login.vue
<template>
// ...
</template>
<script>
export default {
methods: {
login() {
// login logic here
// after successful login
this.$store.commit('login') // sets auth to true
}
}
}
</script>
This might involve more process but you end up with better results at the end of the day.
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'),
}]
},
My routing for my site works fine but the problem arises when I hit the refresh button.
On a base route for example http://localhost:8080/employers the page or component style remains the same but when I refresh a child route for example http://localhost:8080/employers/google all the style for this component will be lost.
Any help on how to resolve this problem will be appreciated
import Vue from 'vue'
import Router from 'vue-router'
// import store from './store.js'
Vue.use(Router)
const router = new Router({
mode: 'history',
base: process.env.BASE_URL,
routes: [
{
path: '/',
component: () => import('./views/Home.vue'),
children: [
{
path: "",
component: () => import("./views/HomePage.vue"),
},
{
path: '/jobs',
name: 'jobs',
component: () => import('./views/JobListings.vue')
},
{
path: '/job/:id',
name: 'job',
component: () => import('./views/JobDetails.vue')
},
{
path: '/login',
name: 'login',
component: () => import('./views/Login.vue')
},
{
path: '/register',
name: 'register',
component: () => import('./views/Register.vue')
},
{
path: '/forgotpassword',
name: 'forgotpassword',
component: () => import('./views/ForgotPassword.vue')
},
{
path: '/verify',
name: 'verify',
component: () => import('./views/Verify.vue')
},
],
},
{
path: '/employer',
component: () => import('#/views/Employers.vue'),
children: [
{
path: '',
component: () => import('./views/Employers/Profile.vue')
},
{
path: 'profile',
component: () => import('./views/Employers/Profile.vue')
},
{
path: 'post',
component: () => import('./views/Employers/PostJob.vue')
},
{
path: 'listings',
component: () => import('./views/Employers/Listings.vue')
},
{
path: 'settings',
component: () => import('./views/Employers/Listings.vue')
},
{
path: 'editresume',
component: () => import('./views/Employers/Listings.vue')
},
{
path: 'closeaccount',
component: () => import('./views/Employers/Listings.vue')
},
]
},
// jobseekers route
{
path: '/jobseeker',
component: () => import('#/views/Jobseekers/Home.vue'),
children: [
{
path: '',
component: () => import('#/views/Jobseekers/Profile.vue')
},
{
path: 'resume',
component: () => import('#/views/Jobseekers/Resume.vue')
},
{
path: 'profile',
component: () => import('#/views/Jobseekers/Profile.vue')
},
{
path: 'settings',
component: () => import('#/views/Jobseekers/Settings.vue')
},
{
path: 'applications',
component: () => import('#/views/Jobseekers/Applications.vue')
},
{
path: 'close',
component: () => import('#/views/Jobseekers/Close.vue')
},
]
},
{
path: '/jobseeker/:page',
component: () => import('#/views/Jobseekers/Profile.vue'),
},
{
path: '/search/:region/:keyword',
component: () => import('./views/JobListings.vue')
},
// not found route
{
path: '*',
name: '404',
component: () => import('./views/404.vue')
}
]
})
export default router
The problem is not with your routes, but how you write your css.
I recommend using a scoped style for in component styling (only this component will use the styles).
if more than one components are going to share styling, you can use css files separately.
I noticed that you are loading the components on-demand.
When you navigate from /employers to /employers/google route, there are some CSS styles from /employers route that are being reused in your /employers/google route.
So when you reload http://localhost:8080/employers/google route, you are unable to obtain the styles from /employers which causes your CSS to break.
My suggestion is to move common styles into one particular file and import it into the main file like App.vue so that they are loaded no matter which component is reloaded.
I'm also the same issue but I already include the CSS globally but it doesn't work,
finally, I try to change the router mode from history to hash it work.
Try in my case it works fine.
const router = new Router({
mode: "hash",
base: process.env.BASE_URL,
routes: []
})
Just add mode:"hash" after carrying out mode:"history", has shown below, and you are good to go
const router = new Router({
mode: "history",
mode: "hash",
routes: []
})