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()
})
Related
I have a route guard that looks like this. It checks the vuex store for a property, which is fetched async on page load. Since the code runs before the property is set, it always resolves as false.
Any ideas for a work around or a proper implementation?
router.beforeEach(async (to, from, next) => {
if (to.matched.some(record => record.meta.requiresActivated)) {
if (store.state.account.post_title !== 'true') {
next({
path: '/activate',
query: { redirect: to.fullPath, id: store.state.user.id }
})
}
next()
} else {
next()
}
})
I have the needings to use firebase auth with vue router.
I have this simple guard, but I've noticed that sometimes the users will see for a while the pages also if they are not logged.
router.beforeEach( async (to, from) => {
onAuthStateChanged( getAuth(app), (user) => {
console.log(user, to.meta.requireAuth)
if( to.meta.requireAuth && !user ) {
return {
name: 'Signin'
}
}
})
})
I also have this kind of control inside my components, but I'm looking for something global to use to prevent unregistered users to see the app.
Any suggestion?
You can wrap the onAuthStateChanged in a Promise and make your before each an async function.
// in some global file
export async function getCurrentUser(): Promise<User | null> {
return new Promise((resolve, reject) => {
const unsubscribe = auth.onAuthStateChanged((user) => {
unsubscribe();
resolve(user);
}, reject);
});
}
// your router file
router.beforeEach(async (to, from, next) => {
if (to.matched.some((record) => record.meta.publicAccess)) {
next();
} else {
const currentUser = await getCurrentUser();
if (currentUser) {
next();
} else {
next({ name: "Login" });
}
}
});
// Your route object
{
name: "Login",
path: "/login",
component: () => import("#/views/authentication/Login.vue"),
}
I'm trying to wait for an asynchronous response in my route guard. The problem is that two routes are hit.
When the page is loaded, the / route is triggered instantly, followed by my target route
router.beforeEach(async (to, from, next) => {
await new Promise(resolve => {
setTimeout(resolve, 500)
})
next()
})
or
router.beforeEach((to, from, next) => {
setTimeout(next, 500)
})
})
In my log I see two entries when visiting /foo, first / then /foo after 500ms. I'm expecting to see only the latter:
setup(props, { root }) {
const hideNav = computed(() => {
console.log(root.$route.path)
return root.$route.meta?.hideNav
})
return {
hideNav
}
}
})
I'm using vue#2.6.12 and vue-router#3.4.9
I'm not sure but this how I guard my route in a Vue component hope this helps you
beforeRouteEnter(to, from, next) {
if (store.getters.isAuthenticated) {
Promise.all([
store.dispatch(FETCH_ARTICLE, to.params.slug),
store.dispatch(FETCH_COMMENTS, to.params.slug)
]).then(() => {
next();
});
} else {
Promise.all([store.dispatch(FETCH_ARTICLE, to.params.slug)]).then(() => {
next();
});
}
},
Have you tried using beforeEnter?
This way you can specify which routes are going to execute your function
Like this code below:
const router = new VueRouter({
routes: [
{
path: '/foo',
component: Foo,
beforeEnter: (to, from, next) => {
// ...
}
}
]
})
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();
}
}
}
I’m using this ssr boilerplate for my app, https://github.com/vuejs/vue-hackernews-2.0
I don’t know how to implement logic for checking is user authenticated for each user’s page request, I’m using cookies for storing user's token
I looked that router can handle request before render component:
router.beforeEach((to, from, next) => {
if (to.matched.some(record => record.meta.requiresAuth)) {
// this route requires auth, check if logged in
// if not, redirect to login page.
// isLoggedIn()
// .then(response => response.json())
// .then(json => {
// console.log(json[0])
// next()
// })
// .catch(error => {
// console.log(error)
// next()
// })
const x = true
if (!x) {
next({
path: '/signin',
query: { redirect: to.fullPath }
})
} else {
next()
}
} else {
next() // make sure to always call next()!
}
})
return router
}
But here is problem, router starting to use this code in client-side and in server-side, which in my case a little bit incorrect.
How to send request for is user authenticated only once, or in client-side or in server-side?
Answering on my issue, next approach - is what I searched, this vue router middleware will check user, before sending other requests(in my components methods like asyncData), then put user's info into store:
// router/index.js
export function createRouter (cookies) {
const router = new Router({ ... })
router.beforeEach((to, from, next) => {
// this route requires auth, check if logged in
// if not, redirect to login page.
if (to.matched.some(record => record.meta.requiresAuth)) {
if (router.app.$store) {
router.app.$store
.dispatch('FETCH_CURRENT_USER', cookies)
.then(next)
.catch(() => next('/signin'))
} else {
next()
}
} else {
next()
}
return router
}
// store/actions.js
export default {
FETCH_CURRENT_USER: ({ commit }, cookie) => {
const values = {
credentials: 'include',
headers: {
'Content-Type': 'application/json',
Origin: FRONTEND_HOST,
Cookie: cookie
}
}
return fetch(`${API_HOST}/api/v1/users/me`, values)
.then(handleStatus)
.then(handleJSON)
.then(json => commit('SET_CURRENT_USER', json))
}
}