I have a login issue with website that uses:
Vue.js v2.0.3
vue-router v2.0.1
vuex v0.8.2
In routes.js I have a simple interceptor setup
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.
if (!router.app.auth.isUserLoggedIn) {
next({
path: '/login',
query: { redirect: to.fullPath }
})
} else {
next()
}
} else {
next() // make sure to always call next()!
}
})
And in login.vue,which handles the login page logic after using Google API only for login succeeds I call this:
this.login(userData).then(
() => this.$router.push(this.redirectToAfterLogin), // Login success
() => {} // Login failed
)
mounted: function(){
if (this.auth.isUserLoggedIn){
// Let's just redirect to the main page
this.$router.push(this.redirectToAfterLogins)
}else{
Vue.nextTick(() => {
this.loadGooglePlatform()
})}}
computed: {
redirectToAfterLogin: function() {
if (this.$route.query.redirect){
return this.$route.query.redirect
}else{
return '/'
}
}
}
router.js
var VueRouter = require('vue-router')
// Router setup
export const router = new VueRouter({
linkActiveClass: "is-active",
mode: 'history',
saveScrollPosition: true,
routes: [
{ path: '', name: 'root', redirect: '/home' },
{ path: '/login', name: 'login', meta: { loadingNotRequired: true }, component: require('./pages/login.vue') },
{ path: '/logout', name: 'logout', meta: { loadingNotRequired: true }, component: require('./pages/logout.vue') },
{ path: '/home', name: 'home', title: 'Home', redirect: '/home/random', component: require('./pages/home.vue'),
children: [
{ path: 'random', name: 'random', meta: { requiresAuth: true }, title: 'Random', component: require('./pages/random.vue') }
]
}
]
})
// Redirect to login page if not logged In
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.
if (!router.app.auth.isUserLoggedIn) {
next({
path: '/login',
query: { redirect: to.fullPath }
})
} else {
next()
}
} else {
next() // make sure to always call next()!
}
})
Now here this.login is just the call to vuex, to update the logged in user.
What happens is that after login, URL changes to /home, but the DOM does not update!
Only way that successfully changed the DOM was forcing location.reload() and that is not what I want to do, as it loses my dynamically loaded G scripts in Head.
Any idea on what to do to force the view to update DOM?
NOTE: it happens only on the first login of user, if he logs out and back-in, the redirecting is fine
Not a perfect solution may be, as it is going to recreate the component but it will work for every case when having same route & needs to update the component.
Just update the <router-view/> or <router-view></router-view> with
<router-view :key="$route.fullPath"></router-view>
Vue re-uses components where possible. You should use beforeRouteUpdate to react to a route switch that uses the same component.
I have the same problem "URL changes to /home, but the DOM does not update".
In my project, the tag "transition" maked the problem.
Hope it is helpful！
Maybe you should set the redirectToAfterLogin function into methods, like this it will be recalculated each times. The computed will be modified only if used v-model changed. To stick to the meaning of the function name, I would set the router push inside.
login.vue :
mounted: function(){
if (this.auth.isUserLoggedIn){
// Let's just redirect to the main page
// this.$router.push(this.redirectToAfterLogins)
this.redirectToAfterLogins()
}else{
Vue.nextTick(() => {
this.loadGooglePlatform()
})
}
},
// computed: {
methods: {
this.login(userData).then(
// () => this.$router.push(this.redirectToAfterLogin), // Login success
() => this.redirectToAfterLogin(), // Login success
() => {} // Login failed
),
redirectToAfterLogin: function() {
if (this.$route.query.redirect){
// return this.$route.query.redirect
this.$router.push(this.$route.query.redirect)
}else{
// return '/'
this.$router.push('/')
}
}
}
https://v2.vuejs.org/v2/guide/computed.html#Computed-Properties
https://v2.vuejs.org/v2/guide/computed.html#Computed-Caching-vs-Methods
"However, the difference is that computed properties are cached based on their dependencies. A computed property will only re-evaluate when some of its dependencies have changed. This means as long as message has not changed, multiple access to the reversedMessage computed property will immediately return the previously computed result without having to run the function again."
methods vs computed and filters :
Access vue instance/data inside filter method
Related
I'm new to Vue / web development, ever since I started i've had a good amount of fun but now i'm stuck.
Currently I am creating an admin dashboard with Firebase authentication. Everything seems to work like it should but there is one thing that I still don't understand.
In the Vue Router I have all the different routes set up and the dashboard is inaccessible (if not logged in to Firebase).
This is my Router Guard:
const routes = [
{
path: "/",
name: "Home",
component: Home,
},
{
path: "/register",
name: "Register",
component: Register,
},
{
path: "/login",
name: "Login",
component: Login,
},
{
path: "/dashboard",
name: "Dashboard",
component: Dashboard,
meta: {
requiresAuth: true,
},
},
];
router.beforeEach((to) => {
//If route requires authentication
if (to.matched.some((rec) => rec.meta.requiresAuth)) {
//Check firebase user
auth.onAuthStateChanged((user) => {
console.log(user);
//If the user object does not exist then redirect to the /Login page
if (!user) {
router.push("/login");
}
});
}
});
If I now try to open localhost:8080/dashboard it shows the dashboard for a split second and then hops to the /login page.
If also tried it with next({name: 'Login'}) but for some reason I keep getting white pages when I use next().
Hope someone can help me.
Thanks :)
The problem is that instead of checking for a logged-in user you are adding an "event listener" auth.onAuthStateChanged.. it fires async when the authentication state changes. However you need a sync check here. The best would be to use vuex and store your user in a global state. Though if you don't use vuex at all and you need your user only here, then probably a "local" user var in the router would also work.. something like this:
let user = null
auth.onAuthStateChanged(u => {
console.log(u)
if (u) {
user = u
} else {
user = null
}
})
router.beforeEach(to => {
if (to.matched.some(rec => rec.meta.requiresAuth)) {
//Check firebase user
if (!user) {
router.push("/login");
}
}
})
It's just a concept, but it should work.. let me know :)
I am having an issue accessing the 'Vue' in a beforeEnter function.
When a session has expired I have a small toast show that tells the user to login again.
When toast contains a button, which when clicked I'd like to trigger another modal to allow the user to login. This is contained in the 'Vue' as a sperte component.
How do I access the 'Vue' ('this') to trigger the modal?
I've tried; this.app and this.a.app - among others lists on SO and elsewhere, to to avail.
Thanks.
Route
{
path: "/dashboard",
name: "dashboard",
component: Dashboard,
beforeEnter: protectedPage,
meta: {
title: "Dashboard"
}
},
Function
function protectedPage(to, from, next) {
if (VueJwtDecode.decode(localStorage.token).exp < Math.floor(Date.now() / 1000)) {
localStorage.removeItem("token");
Vue.toasted.show("The session has ended. Please login.", {
theme: "toasted-primary",
position: "top-center",
duration: null,
action: {
text: "Login",
onClick: (e, toastObject) => {
// CODE HERE TO TRIGGER LOGIN MODAL
next("/");
toastObject.goAway(0);
}
}
});
Vue.toasted.hide();
next("/");
}
}
I'm not sure you can on a beforeEnter looking at the docs but you can achieve the same on a beforeRouteEnter inside the component itself. By passing a callback.
beforeRouteEnter (to, from, next) {
getPost(to.params.id, (err, post) => {
next(vm => vm.setData(err, post))
})
},
I have the following router configured:
const router = new Router({
mode: 'history',
routes: [
// root
{
path: '/',
component: ComponentPage,
redirect: routePrefix.public,
children: [
// public
{
path: routePrefix.public,
component: ComponentPage,
redirect: `${routePrefix.public}/login`,
children: [
{
path: `${routePrefix.public}/login`, component: LoginPage,
}],
},
// private
{
path: routePrefix.private,
component: ComponentPage,
children: [
{
path: `${routePrefix.private}/u`, component: PrivatePage,
}],
}],
}],
});
now as you can see, there are two main parts; a public, and a private one.
Additionally I have the following navigation guard configured for authorization:
router.beforeEach((to, from, next) => {
console.log(`registered request to redirect from
'${from.fullPath}' to '${to.fullPath}'`);
if (to.fullPath.startsWith(routePrefix.private) &&
!Store.getters['auth/isAuthenticated']) {
console.log('-> reroute to public main');
next(routePrefix.public);
} else if (to.fullPath.startsWith(routePrefix.public) &&
Store.getters['auth/isAuthenticated']) {
console.log('-> reroute to private main');
next(routePrefix.private);
} else {
next();
}
});
If you're wondering what the route prefix look like, here you go:
const routePrefix = {
public: '/p', private: '/x',
};
Nothing so special.
The problem
I open the page localhost:8080/ which redirects / to /p/login as expected. After a successful login, I perform a Router.push('/') with the intention to further re-route the user once again.
The idea is that / should get redirect to /p/login again, where the navigation guard kicks in and redirects it to /x/... But it doesn't. It stays on /.
Isn't it supposed to redirect it away from the main page? How can I fix it?
I didn't find a solution to this problem. I've reached my goal by pushing to the desired destination directly instead of letting the rerouting do its magic. This works.
Hi I want to load a default child route as soon as i load the page
Please check the code :
$stateProvider.state('userlist', {
url: '/users',
component: 'users',
data:{"name":"abhi"},
resolve: {
users: function(UserService) {
return UserService.list();
}
}
});
$stateProvider.state('userlist.detail', {
url: '/:userId',
component: 'userDetail',
resolve: {
user: function($transition$, users) {
return users.find(user => user.id == $transition$.params().userId);
}
}
});
$stateProvider.state('userlist.id', {
url: '/:username',
component: 'userName',
resolve: {
user: function($transition$, users) {
return users.find(user => user.name == $transition$.params().username);
}
}
});
});
by default route is navigating to /users . I want it to navigate to /user/userId by default .
By using otherwise you can set default route
Remember: your child state already has params, and you can't load them with otherwise for this you have to change state with $state.go() in your controller
app.config(function($urlRouterProvider){
$urlRouterProvider.otherwise('/index');
})
more information
I am building an admin page with Vue.js 2 and I want to prevent unauthenticated users from accessing the /admin route and redirect them to /login. For that I have used the In-Component Guard beforeRouteEnter in the Admin component like follows
...
beforeRouteEnter(to, from, next) {
if(userNotLogedIn) {
this.$router.push('/login');
}
}
The problem here is that this is not defined in beforeRouteEnter hook. So what's the proper way to access $router and redirect to a different url in this case ?
The documentation states that:
The beforeRouteEnter guard does NOT have access to this, because the
guard is called before the navigation is confirmed, thus the new
entering component has not even been created yet.
You can redirect to another page by calling next like this:
beforeRouteEnter(to, from, next) {
if(userNotLogedIn) {
next('/login');
}
}
Here is another way to accomplish the same result: So instead of using beforeRouteEnter on each protected route, you could define protected routes in your router configuration using a meta property, then use beforeEach hook on all the routes and check for protected routes and redirect to login page when needed:
let router = new Router({
mode: 'history',
routes: [
{
path: '/profile',
name: 'Profile',
component: Profile,
meta: {
auth: true // A protected route
},
},
{
path: '/login',
name: 'Login',
component: Login, // Unprotected route
},
]
})
/* Use this hook on all the routes that need to be protected
instead of beforeRouteEnter on each one explicitly */
router.beforeEach((to, from, next) => {
if (to.meta.auth && userNotLoggedIn) {
next('/login')
}
else {
next()
}
})
// Your Vue instance
new Vue({
el: '#app',
router,
// ...
})