Is there a way to add beforeResolve navigation guard in nuxt.config.js?
My nuxt.config.js
module.exports {
...
router: {
beforeResolve(to, from, next) {
if (this.$store.getters.isLoggedIn)
next('/resource')
}
}
...
}
But its never gets called!
I've been trying to achieve a redirection before the component is mounted based on the users logged in state on the vuex store.
You have 2 options for this. You can set a global rule via the middleware or in the respective page.
// middleware/route-guard.js
export default function ({ app }) {
app.router.beforeResolve((to, from, next) => {
if (app.store.getters.isLoggedIn) {
next('/resource')
} else {
next();
}
});
}
// Nuxt Page Component
export default {
beforeResolve (to, from, next) {
if (this.$store.getters.isLoggedIn) {
next('/resource')
} else {
next();
}
}
}
Related
Need to do something like middleware, need to check if the user has a token, then allow the transition
router.beforeEach((to, from, next) => {
const accessNeed = ['Dashboard',]
if (localStorage.getItem("token")){
if (!accessNeed.includes(to.name)) {
next({ name: 'Home' })
}else{
next()
}
}else{
next()
}
})
You are either using Nuxt, or just the Vue SSR package. So you have to make sure, the code gets executed only on client:
router.beforeEach((to, from, next) => {
if (!process.client) {
next()
return
}
const accessNeed = ['Dashboard']
if (window && window.localStorage.getItem("token")){
if (!accessNeed.includes(to.name)) {
next({ name: 'Home' })
} else{
next()
}
}
next()
})
Is it possible with Vue2 to see where...
this.$router.go(-1)
Will take you?
We have a use case to redirect the user to last page they were on after they signed in, unless that is the forgot your password page. In that case we would want to send them back to the home page.
What is the best way to do this?
Vue 2 with Vue Router 3
You could use beforeRouteEnter navigation guard to track the previous route (stored in from):
export default {
beforeRouteEnter(to, from, next) {
next(vm => {
vm._backRoute = from.path
})
},
methods: {
goBack() {
if (this._backRoute === '/reset-password') {
this.$router.push({ name: 'Home' })
} else {
this.$router.go(-1)
}
}
}
}
demo 1
Vue 3 with Vue Router 4
You could read window.history.state.back to see what the back-state would be beforehand:
export default {
methods: {
goBack() {
if (window.history.state.back === '/reset-password') {
this.$router.push({ name: 'Home' })
} else {
this.$router.go(-1)
}
}
}
}
demo 2
Is it possible to prevent a route change within a Vue Component (not within my router file)?
My situation uses the same component, but the URL changes (/users/1 -> /users/2)
Vue.extend({
data: () => ({
active: true
}),
beforeRouteLeave(to, from, next){
if (this.active) {
// do not redirect
} else {
next();
}
}
})
My understanding is that this doesn't work when navigating the URL but the View/Component stays the same.
I need to use beforeRouteUpdate instead of beforeRouteLeave as stated in the docs
beforeRouteUpdate(to, from, next) {
if (this.active) {
next(false);
} else {
next();
}
},
If I'm using beforeRouteUpdate route url path in the browser not getting update, so I used beforeRouteLeave which is updating url and stop reloading same page.
beforeRouteLeave(to, from, next) {
if (this.active) {
next(false);
} else {
next();
}
}
simply importing store to routes.js bringing not defined error.
How can bring the store state values in vue navigation guard checks?
import store from '../store/store';
router.beforeEach((to, from, next) => {
if (to.meta.requiresAuth) {
if (!store.state.auth.user) {
next('/login')
} else {
next()
}
} else {
next()
}
})
I'm working with the latest versions of vue-router, vuex and feathers-vuex and I have a problem with my router.
What I'm doing is to check if a route has the property "requiresAuth": true in the meta.json file. If it does then check the value of store.state.auth.user provided by feathers-vuex, if this value is not set then redirect to login.
This works fine except when I'm logged in and if I reload my protected page called /private then it gets redirected to login so it seems that the value of store.state.auth.user is not ready inside router.beforeEach.
So how can I set up my router in order to get the value of the store at the right moment?
My files are as follow:
index.js
import Vue from 'vue'
import Router from 'vue-router'
import store from '../store'
const meta = require('./meta.json')
// Route helper function for lazy loading
function route (path, view) {
return {
path: path,
meta: meta[path],
component: () => import(`../components/${view}`)
}
}
Vue.use(Router)
export function createRouter () {
const router = new Router({
mode: 'history',
scrollBehavior: () => ({ y: 0 }),
routes: [
route('/login', 'Login')
route('/private', 'Private'),
{ path: '*', redirect: '/' }
]
})
router.beforeEach((to, from, next) => {
if (to.meta.requiresAuth) {
if (!store.state.auth.user) {
next('/login')
} else {
next()
}
} else {
next()
}
})
return router
}
meta.json
{
"/private": {
"requiresAuth": true
}
}
I fixed the issue by returning a promise from vuex action and then run the validations
router.beforeEach((to, from, next) => {
store.dispatch('auth/authenticate').then(response => {
next()
}).catch(error => {
if (!error.message.includes('Could not find stored JWT')) {
console.log('Authentication error', error)
}
(to.meta.requiresAuth) ? next('/inicio-sesion') : next()
})
})