I have two routes on vue-router, /user/:uid and /itinerary/:id. The first route is shown after the user logs in and from there they select the itinerary they want to view which would bring them to the next route.
While on /itinerary/:id, if I do a page refresh/reload/f5 I see the browser address bar back on /user/:uid. In the vue-devtools, it just resets to showing /user/:uid (not a case of some router.push() or whatever). Why is this happening and how can I keep the user on /itinerary/:id even if they refresh the page?
const routes = [
{ path: '/', component: LoginPanel },
{
path: '/user/:uid',
component: ItineraryList,
beforeEnter: authGuard,
},
{
path: '/itinerary/:itinerary_id',
name: 'itineraryView',
component: ItineraryBuilder,
beforeEnter: authGuard,
},
];
function authGuard(to, from, next) {
// retrieved from localStorage
if (idToken && userEmail) {
next();
} else {
next('/');
window.alert('Please login first');
}
}
Edit: Added relevant code from ItineraryBuilder
beforeRouteLeave(to, from, next) {
if (this.confirmed) { // set on data() property
next();
} else {
this.$modal.show('dialog', {
title: 'Confirm save new changes?',
text: '',
buttons: [{
title: 'Yes',
handler: () => {
let itinerary_id = this.$route.params.itinerary_id
let queries = [];
this.itinerary.forEach(item => {
console.log(item);
let board_id = item.doc_id;
queries.push(db.collection('itineraries').doc(board_id).set(item, { merge: true }));
});
Promise.all(queries).then(() => {
// this.$store.commit('UPDATE_ITINERARY', this.itinerary);
this.$modal.hide('dialog');
this.confirmed = true
eventBus.$emit('itinerary_saved', true);
next();
})
}
},
{
title: 'No',
handler: () => {
this.$modal.hide('dialog');
next(false);
}
}]
});
}
}
I didn't notice it at first, but could it be related? I'm using this.confirm as a flag to handle if there are any changes made by the user, I'll emit a change event and set the flag to false - meaning there are unsaved changes so the current state is unconfirmed.
Related
I'm building a small e-commerce store with an admin panel for myself.
I use Firebase firestore as my backend to store all the user's data.
I have a root 'users' collection with a document for every single registered user and everything else each user has is branching out of the user doc.
Here are firestore commands i perform so you understand the structure better.
db.collection('users').doc(userId).collection('categories').doc(subCategoryId)...
db.collection('users').doc(userId).collection('subcategories').doc(subCategoryId)...
I use Vuex so every time i need to change something on my firestore (update a product category, remove a category etc.), i dispatch an appropriate action.
The first thing any of those actions does is to go ahead and dispatch another action from auth.js that gets the userId.
The problem is that if the action in question should run in a mounted() lifecycle hook, then it fails to grab the userId.
In EditCategory.vue updateCategory action works perfectly well because SubmitHandler() is triggered on click event but in Categories.vue the fetchCategories does not work and spit out an error:
[Vue warn]: Error in mounted hook (Promise/async): "FirebaseError: [code=invalid-argument]: Function CollectionReference.doc() requires its first argument to be of type non-empty string, but it was: null"
Function CollectionReference.doc() requires its first argument to be of type non-empty string, but it was: null
Which, as far as i understand it, basically tells me that fetchCategories() action's firestore query could not be performed because the userId was not recieved.
After two days of moving stuff around i noticed that errors only occur if i refresh the page. If i switch to other tab and back on without refreshing, then fetchCategories() from Categories.vue mounted() hook works. Placing the code in to created() hook gives the same result.
I think that there is some fundamental thing i am missing about asynchronous code and lifecycle hooks.
Categories.vue component
<template>
<div class="category-main">
<section>
<div class="section-cols" v-if="!loading">
<EditCategory
v-on:updatedCategory="updatedCategory"
v-bind:categories="categories"
v-bind:key="categories.length + updateCount"
/>
</div>
</section>
</div>
</template>
<script>
import EditCategory from '#/components/admin/EditCategory.vue'
export default {
name: 'AdminCategories',
components: {
EditCategory,
},
data: () => ({
updateCount: 0,
loading: true,
categories: [],
}),
async mounted() {
this.categories = await this.$store.dispatch('fetchCategories');// FAILS!
this.loading = false;
},
methods: {
addNewCategory(category) {
this.categories.push(category);
},
updatedCategory(category) {
const catIndex = this.categories.findIndex(c => c.id === category.id);
this.categories[catIndex].title = category.title;
this.categories[catIndex].path = category.path;
this.updateCount++;
}
}
}
</script>
category.js store file
import firebase, { firestore } from "firebase/app";
import db from '../../fb';
export default {
actions: {
async getUserId() {
const user = firebase.auth().currentUser;
return user ? user.uid : null;
},
export default {
state: {
test: 10,
categories: [],
subCategories: [],
currentCategory: '',
},
mutations: {
setCategories(state, payload){
state.categories = payload;
},
},
actions: {
async fetchCategories({commit, dispatch}) {
try {
const userId = await dispatch('getUserId');
const categoryArr = [];
await db.collection('users').doc(userId).collection('categories').get().then((querySnapshot) => {
querySnapshot.forEach((doc) => {
categoryArr.push({ id: doc.id, ...doc.data() })
});
})
commit('setCategories', categoryArr);
return categoryArr;
} catch (err) { throw err; }
},
async updateCategory({commit, dispatch}, {title, path, id}) {
try {
const userId = await dispatch('getUserId');
console.log('[category.js] updateCategory', userId);
await db.collection('users').doc(userId).collection('categories').doc(id).update({
title,
path
})
commit('rememberCurrentCategory', id);
return;
} catch (err) {throw err;}
}
},
}
auth.js store file
import firebase, { firestore } from "firebase/app";
import db from '../../fb';
export default {
actions: {
...async login(), async register(), async logout()
async getUserId() {
const user = firebase.auth().currentUser;
return user ? user.uid : null;
},
},
}
index.js store file
import Vue from 'vue'
import Vuex from 'vuex'
import auth from './auth'
import products from './products'
import info from './info'
import category from './category'
Vue.use(Vuex)
export default new Vuex.Store({
modules: {
auth, products, info, category,
}
})
EditCategory.vue
export default {
name: 'EditCategory',
data: () => ({
select: null,
title: '',
path: '',
current: null
}),
props: {
categories: {
type: Array,
required: true
}
},
methods: {
async submitHandler() {
if (this.$v.invalid){
this.$v.$touch()
return;
}
try {
const categoryData = {
id : this.current,
title: this.title,
path: this.path
};
await this.$store.dispatch('updateCategory', categoryData);// WORKS!
this.$emit('updatedCategory', categoryData);
} catch (err) { throw err; }
},
},
//takes current category id from store getter
computed: {
categoryFromState() {
return this.$store.state.currentCategory;
}
},
created() {
console.log('[EditCategory.vue'], currentCategory);
},
mounted(){
this.select = M.FormSelect.init(this.$refs.select);
M.updateTextFields();
},
destroyed() {
if (this.select && this.select.destroy) {
this.select.destroy;
}
}
}
</script>
First of all, it's just a small detail, but you don't need need to make your 'getUserId' action async, since it does not use the 'await' keyword. So can simplify this :
async getUserId() {
const user = firebase.auth().currentUser;
return user ? user.uid : null;
}
const userId = await dispatch('getUserId')
into this :
getUserId() {
const user = firebase.auth().currentUser;
return user ? user.uid : null;
}
const userId = dispatch('getUserId')
Coming back to your id that seems to be undefined, the problem here is that your 'mounted' event is probably triggered before the 'login' can be completed.
How to solve this case ? Actually, there are a lot of different ways to approch this. What I suggest in your case is to use a middleware (or a 'route guard'). This guard can make you are verified user before accessing some routes (and eventually restrict the access or redirect depending on the user privileges). In this way, you can make sure that your user is defined before accessing the route.
This video is 4 years old so it is not up to date with the last versions of Firebas. But I suggest The Net Ninja tutorial about Vue Route Guards with Firebase if you want to learn more about this topic.
Accepted answer actually pointed me to the correct direction.
In my case i had to make a route guard for child routes.
router.vue
import Vue from 'vue'
import Router from 'vue-router'
import firebase from 'firebase/app';
Vue.use(Router);
const router = new Router({
mode: 'history',
routes: [
{
path: '/',
name: 'home',
meta: {layout: 'main-layout'},
component: () => import('./views/main/Home.vue')
},
{
path: '/bouquets',
name: 'bouquets',
meta: {layout: 'main-layout'},
component: () => import('./views/main/Bouquets.vue')
},
{
path: '/sets',
name: 'sets',
meta: {layout: 'main-layout'},
component: () => import('./views/main/Sets.vue')
},
{
path: '/cart',
name: 'cart',
meta: {layout: 'main-layout'},
component: () => import('./views/main/Cart.vue')
},
{
path: '/login',
name: 'login',
meta: {layout: 'empty-layout'},
component: () => import('./views/empty/Login.vue')
},
{
path: '/register',
name: 'register',
meta: {layout: 'empty-layout'},
component: () => import('./views/empty/Register.vue')
},
{
path: '/admin',
name: 'admin',
meta: {layout: 'admin-layout', auth: true},
component: () => import('./views/admin/Home.vue'),
children: [
{
path: 'categories',
name: 'adminCategories',
meta: {layout: 'admin-layout', auth: true},
component: () => import('./views/admin/Categories'),
},
{
path: 'subcategories',
name: 'adminSubcategories',
meta: {layout: 'admin-layout', auth: true},
component: () => import('./views/admin/SubCategories'),
},
{
path: 'products',
name: 'adminProducts',
meta: {layout: 'admin-layout', auth: true},
component: () => import('./views/admin/Products'),
},
]
},
{
path: '/checkout',
name: 'checkout',
meta: {layout: 'main-layout'},
component: () => import('./views/main/Checkout.vue')
},
{
path: '/:subcategory',
name: 'subcategory',
meta: {layout: 'main-layout'},
props: true,
params: true,
component: () => import('./views/main/Subcategory.vue')
},
]
})
router.beforeEach((to, from, next) => {
//if currentUser exists then user is logged in
const currentUser = firebase.auth().currentUser;
//does a route has auth == true
const requireAuth = to.matched.some(record => record.meta.auth);
//if auth is required but user is not authentificated than redirect to login
if (requireAuth && !currentUser) {
// next('/login?message=login');
next('login')
} else {
next();
}
})
export default router;
category.js fetchCategories() action
async fetchCategories({commit, dispatch}) {
const userId = await dispatch('getUserId')
try {
const categoryArr = [];
await db.collection('users').doc(userId).collection('categories').get().then((querySnapshot) => {
querySnapshot.forEach((doc) => {
categoryArr.push({ id: doc.id, ...doc.data() })
});
})
commit('setCategories', categoryArr);
return categoryArr;
} catch (err) { throw err; }
},
When I login with a user, it redirects me to the dashboard as expected. As soon as I logout and try to login again (even with another user, and WITHOUT refreshing the page) it gives me back this error in console:
I just want to redirect the user in the dashboard if authenticated, even when the page is not refreshed cause I did notice that if I refresh the page I can login without problems.
Help me if you can. Down here some code:
Login method
methods: {
...mapActions({
attempt: "auth/attempt",
}),
submit(credentials) {
axios
.post("http://127.0.0.1:8000/api/login", credentials)
.then((res) => {
// console.log(res.data);
if (res.data.success) {
this.attempt(res.data.token)
}
if (res.data.errors) {
this.loginErrors = res.data.errors;
} else {
this.$router.push({ name: 'dashboard' })
}
})
.catch((err) => {
if (
err.name !== "NavigationDuplicated" &&
!err.message.includes(
"Avoided redundant navigation to current location"
)
) {
console.log(err);
}
});
},
},
dashboard path in the router
{
path: '/dashboard',
name: 'dashboard',
component: DashboardComponent,
beforeEnter: (to, from, next) => {
if (!store.getters['auth/authenticated']) {
return next({
name: 'home'
})
}
next()
}
},
attempt action in vuex store
async attempt({ commit, state }, token) {
if (token) {
commit('SET_TOKEN', token)
}
// se non c'è
if(!state.token) {
return
}
try {
await axios.get('http://127.0.0.1:8000/api/user')
.then(res => {
commit('SET_USER', res.data)
})
} catch (e) {
commit('SET_TOKEN', null)
commit('SET_USER', null)
}
},
others from vuex
namespaced: true,
state: {
token: null,
form: null,
},
getters: {
authenticated(state) {
return state.token && state.form
},
user(state) {
return state.form
},
},
mutations: {
SET_TOKEN(state, token) {
state.token = token
},
SET_USER(state, data) {
state.form = data
},
},
Update: the call to attempt() should be awaited, otherwise this.$router.push({ name: 'dashboard' }) (and therefore the guard function on the /dashboard route) will be called before the call to the /api/user API has completed:
submit(credentials) {
axios
.post("http://127.0.0.1:8000/api/login", credentials)
.then(async (res) => {
// console.log(res.data);
if (res.data.success) {
await this.attempt(res.data.token)
}
if (res.data.errors) {
this.loginErrors = res.data.errors;
} else {
this.$router.push({ name: 'dashboard' })
}
})
.catch((err) => {
if (
err.name !== "NavigationDuplicated" &&
!err.message.includes(
"Avoided redundant navigation to current location"
)
) {
console.log(err);
}
});
},
next is a function that should be called exactly once (not returned).
Try changing the code in the router to:
{
path: '/dashboard',
name: 'dashboard',
component: DashboardComponent,
beforeEnter: (to, from, next) => {
if (!store.getters['auth/authenticated']) {
next({ name: 'home' })
} else {
next()
}
}
},
I'd like to use a route guard to check localstorage if the user has the rights to login or not (simple boolean true or false for testing).
If I log in, the router always takes me back to my login, even if the localstoreage says it's authenticated.
If I then click on my logo (/), I come to the user area and all works fine.
Router.beforeEach((to, from, next) => {
const isAuthed = JSON.parse(localStorage.getItem("store"));
if (to.path !== "/login" && isAuthed === null) {
next("/login");
} else if (to.path !== "/login" && isAuthed.auth === false) {
next("/login");
} else {
next();
}
});
These are my routes:
const routes = [
{ path: "", name: "Home", component: () => import("pages/Home") },
{ path: "/login", name: "Login", component: () => import("pages/Login") },
{ path: "*", component: () => import("pages/Error404.vue") },
];
export default routes
This is my login function to toggle true/false on login and then push the user to home:
login: function () {
store.auth = true
this.$router.push('/')
}
What am I thinking wrong here?
I thought because on the first visit, localstorage is null because it will be set after login, so I added a check if object is null but it's the same.
thanks
How can I manage the url for front and admin panel Via Middleware in Vue.
This is the code I have written in router/index.js file:
const router = new VueRouter({ mode: 'history', routes });
router.beforeEach((to, from, next) => {
// redirect to login page if not logged in and trying to access a restricted page
const loggedIn = localStorage.getItem('usertoken') == null ? false : true;
const user = JSON.parse(localStorage.getItem('user'));
//this is for admin
next('/admin/login')
next('/admin/home');
//this is my front URL
next('/terms-condition');
next('/home');
next()
})
export default router;
See the below code it may helps you
/**
* middleware for authentication
*/
router.beforeEach((to, from, next) => {
// redirect to login page if not logged in and trying to access a restricted page
const loggedIn = localStorage.getItem('usertoken') == null ? false : true;
const user = JSON.parse(localStorage.getItem('user'));
if (to.meta.portal == 'admin') {
if (to.meta.auth) {
if (!loggedIn) {
next('/admin/login')
} else if (loggedIn) {
next();
}
} else {
if (!loggedIn) {
next();
} else if (loggedIn) {
if (user.role_id == '1') {
next('/admin/home');
} else {
next('/');
}
}
}
} else if (to.meta.portal == 'front') {
if (loggedIn) {
if (user.role_id == '1') {
next('/admin/home');
} else {
next('/');
}
} else if (!loggedIn) {
if (to.path == "/admin") {
next('/admin/login');
} else {
next();
}
}
}
next()
})
export default router;
And you need to create two router files one for front and other for admin:
//front route file will look like
export default [{
path: '/',
meta: { auth: false, portal: 'front' },
component: () => import('#/components/layouts/front/main.vue'),
children: [
{
path: '/',
name: 'front-home',
title: 'Dashboard',
meta: { auth: false, portal: 'front' },
}
]
}]
//admin router file will be like
export default [
{
path: 'user',
name: 'users',
title: 'Users',
meta: { auth: true, portal: 'admin' },
component: () => import('#/components/templates/admin/user'),
}
]
Main difference is the portal that defines which portal will access by the respective route.Without portal inside meta it won't work.
The way you have implemented is correct
Once the user is successfully logged in , use if else condition to redirect to admin panel, also use Navigation guards given in vue-router
https://router.vuejs.org/guide/advanced/navigation-guards.html#per-route-guard
This help to prevent the other user to use this url directly
I'm trying to use router.beforeEach with localStorage. If there is data in localStorage, I want to skip the homepage. If there is no data, enter the homepage. I can print the data with console.log, but the router process fails
[vue-router] uncaught error during route navigation > failed to
convert exception to string.
How do I control the navigation?
My router.js:
Vue.use(Router);
const router = new Router({
routes: [{
path: '/',
name: 'index',
components: {
default: Index,
header: MainNavbar
},
props: {
header: {
colorOnScroll: 400
}
}
},
{
path: '/landing',
name: 'landing',
components: {
default: Landing,
header: MainNavbar,
footer: MainFooter
},
props: {
header: {
colorOnScroll: 400
},
footer: {
backgroundColor: 'black'
}
}
},
{
path: '/login',
name: 'login',
components: {
default: Login,
header: MainNavbar
},
props: {
header: {
colorOnScroll: 400
}
}
},
{
path: '/profile',
name: 'profile',
components: {
default: Profile,
header: MainNavbar,
footer: MainFooter
},
props: {
header: {
colorOnScroll: 400
},
footer: {
backgroundColor: 'black'
}
}
}
],
scrollBehavior: to => {
if (to.hash) {
return {
selector: to.hash
};
} else {
return {
x: 0,
y: 0
};
}
}
});
router.beforeEach((to, from, next) => {
let adres = JSON.parse(localStorage.getItem('adres'));
if (!adres) {
next('/');
} else {
next('/login');
}
});
export default router;
Example localdata:
{
"id":1,
"adi":"Demo",
"soyadi":"Sef",
"telefon":"05322375277",
"adres":"Girne Mahallesi 6022 Sk. No:22 Kahta/Adıyaman",
"fotograf":"http://localhost:8000/media/kullanici/sef/demosef/chef-1.jpg"
}
You are creating an infinite loop where your beforeEach guard gets triggered over and over. In the beforeEach it checks whether there is an address in localStorage and redirects to either / or /login. Then again before you enter the new route beforeEach is called and checks if there is an address and redirects. The process is repeated ad infinitum. You need to call next() without any parameters somewhere in your beforeEach guard to confirm normal navigation. So you might want to do something like this ..
router.beforeEach((to, from, next) => {
if (to.path == '/') { // If we are entering the homepage.
let adres = JSON.parse(localStorage.getItem('adres'));
if (!adres) {
next();
} else {
next('/login');
}
} else { // Not entering the homepage. Proceed as normal.
next()
}
});