I need to develop an application with server side authentication with a login view. If I want to use Vue Router to dynamically switch between login and index (the protected view), I need to avoid login view downloading (prefetching) index before succesful authentication, because if not, server will answer with the login page to the index prefetching request.
I'm trying to achieve this in the original Vue Router example that has two routes. Home and about. The first one is included and the second one is lazy loaded (but prefetched) which would be the protected page in the real application.
In order to avoid prefetching I have tried all the webpack magic comments I have found, but the prefetching is still hapenning.
Here is the code:
import Vue from "vue"
import VueRouter from "vue-router"
import Home from "../views/Home.vue"
Vue.use(VueRouter);
const routes = [
{
path: "/",
name: "Home",
component: Home
},
{
path: "/about",
name: "About",
// route level code-splitting
// this generates a separate chunk (about.[hash].js) for this route
// which is lazy-loaded when the route is visited.
component: () =>
import(/* webpackChunkName: "about"*/ /* webpackMode: "lazy" */ /* webpackPrefetch: false */ /* webpackPreload: false */ "../views/About.vue")
}
];
const router = new VueRouter({
routes
});
export default router;
And here the result:
I don't want to disable the feature from the general webpack configuration because I want it for the rest of the application links. I want to disable it only for this link.
How I should configure the router to achieve it?
Thanks for your time,
H25E
There is a discussion on Github which offers some tips relevant to your situation.
// vue.config.js
module.exports = {
chainWebpack: config => {
config.plugin('prefetch').tap(options => {
options.fileBlackList.push([/MyChunkName(.*)\.js$/]);
return options;
});
}
};
Vue-CLI by default automatically prefetches all dynamic imports - so you have to add a blacklist.
The magic comments for Webpack (webpackPrefetch and probably webpackPreload too) accept either true or a number (index) - but do not accept false argument.
Related
Versions:
vueJS: 3.0.0
vuex: 4.0.2
Chrome: Version 94.0.4606.61 (Official Build) (x86_64)
One advantage of SPA frameworks like vueJS is that they offer some efficiencies in network consumption (ie, fewer server hits by delivering UI/UX assets to client in bulk, and hopefully minimizing server requests). But I'm running into a scenario where just the opposite happens: ie, I am required to revisit the server in order to navigate between vueJS components/views. This seems highly contradictory to the SPA ethos, and I'm suspicious something simple must be wrong in my setup. Details follow.
router/index.js:
import { createRouter, createWebHistory } from 'vue-router'
import Home from '#/views/Home.vue'
import Car from '#/views/Car.vue'
import Bike from '#/views/Bike.vue'
const routes = [
{
path: '/',
name: 'Home',
component: Home
},
{
path: '/about',
name: 'About',
// route level code-splitting
// this generates a separate chunk (about.[hash].js) for this route
// which is lazy-loaded when the route is visited.
component: () => import(/* webpackChunkName: "about" */ '#/views/About.vue')
},
{
path: '/cars/new',
name: 'New Car',
component: Car
},
{
path: '/cars/:id',
name: 'Edit Car',
component: Car,
props: true
},
{
path: '/bikes/new',
name: 'New Bike',
component: Bike
}
]
const router = createRouter({
history: createWebHistory(process.env.BASE_URL),
routes
})
export default router
Then in Car.vue component, I have a form-submit handler something like this:
handleSubmit(event) {
let form = event.target;
if (form.checkValidity()) {
// Add or update Car.
window.location.href = window.location.origin + process.env['BASE_URL'];
}
this.wasValidated = true
Rather than using window.location.href, I tried to use:
this.$router.push('Home');
But that had no effect. That is, the URL in the browser address bar began as something like http://localhost:8080/myapp/, and remained that way after the router-push.
I also tried pushing to other routes, like About; in that case, the browser address bar properly toggled to http://localhost:8080/myapp/about, but the page content remained the same!
Clearly, this cannot be the right behavior.
Can you suggest how to fix this?
this.$router.push('Home') tries to push 'Home' as a path, but there's no matching path in your router config, nor is there a fallback route (for 404s), so the route simply doesn't change.
If you meant to push the route by name, the $router.push() argument needs to be an object:
this.$router.push({ name: 'Home' })
If you prefer to use a path, the path of Home is actually /:
this.$router.push('/')
The lazy component in vue/webpack seem to be wrong or I miss confuse about the terms.
To do lazy loading of component I use the keyword import and webpack should split this component to sepeate bundle, and when I need to load this component webpack should take care of it and load the component.
but in fact, webpack does make sperate file, but it loaded anyway when the application is running. which is unexpected.
For example I just create a simple vue application (using the cli) and browse to localhost:8080/ and the about page should be loaded (by default) using the import keyword.
const routes = [
{
path: '/',
name: 'Home',
component: Home
},
{
path: '/about',
name: 'About',
// route level code-splitting
// this generates a separate chunk (about.[hash].js) for this route
// which is lazy-loaded when the route is visited.
component: () => import(/* webpackChunkName: "about" */ '../views/About.vue')
}
]
So This is by design? I load every time the file I do not need right now (the page about). and if I have 200 pages, when I'll fetch 200 files I dont need. how that ends up? that did I save here by using the import key?
In vuetify for example they uses import key, but the files are loaded anyway and not by demand.
You can also avoid component prefetch using one of the webpack "magic" comments (https://webpack.js.org/guides/code-splitting/#prefetchingpreloading-modules), eg.
components: {
MyComponent: () => import(/* webpackPrefetch: false */ './MyComponent.vue')
}
Feel free to read more about this Vue optimization below:
https://vueschool.io/articles/vuejs-tutorials/lazy-loading-individual-vue-components-and-prefetching/
If you're referring to the default app template from Vue CLI, then you're actually observing the prefetch of the About page, intended to reduce load times for pages the user will likely visit.
If you want to avoid this performance optimization, use this Vue config:
// vue.config.js
module.exports = {
chainWebpack: config => {
config.plugins.delete('prefetch')
config.plugins.delete('preload')
}
}
For troubleshooting reference, Chrome's Network panel includes an Initiator column, which provides a clickable link to the source file that triggered the network call. In this case of the about.js, the source file looks like this:
try using vue-lazyload maybe it can help and for <script> tags you can try async defer it helps in website speed optimizations
I am using Vue.js with Nuxt.js, but I got a problem in router's functions.
In the pure Vue, i can write in main.js like this:
val route = new Router({
routes:{
[...]
}
})
route.beforeEach(to,from,next){
//do something to validate
}
And how to do the same in nuxt.js ? I can not find any file like main.js.
Also, all i know is to deal with the pages folder to achieve router, I can not set the redirect path
please help, thx :)
You can create a plugin for Nuxt
create a plugins/route.js file:
export default ({ app }) => {
// Every time the route changes (fired on initialization too)
app.router.afterEach((to, from) => {
//do something to validate
})
}
and update your nuxt.config.js file:
plugins: ['~/plugins/route']
More details about Nuxt plugins: https://nuxtjs.org/guide/plugins
If anybody might be still interested, it's possible to setup global middleware in nuxt.config.js like this:
router: { middleware: ['foo'] },
then in your middleware/foo.js you do whatever...
export default function({ route, from, store, redirect }) {}
Beware: You can't use this for static sites (nuxt generate), because middleware is not executed on page load, but only on subsequent route changes. Thanks #ProblemsOfSumit for pointing that out.
I'm working on an app in Vue.js using Single File Components and Vue Router. I have a Search component where I need to execute a method to re-populate search results each time a user visits the route. The method executes correctly the first time the route is visited because of the "create" hook:
created: function() {
this.initializeSearch();
},
However, when the user leaves the route (to register or log into the app for instance), and returns to the Search page, I can't seem to find a way to automatically trigger this.initializeSearch() on subsequent visits.
Routes are set up in index.js like so:
import Search from './components/Search.vue';
import Login from './components/Login.vue';
import Register from './components/Register.vue';
// Vue Router Setup
Vue.use(VueRouter)
const routes = [
{ path: '/', component: Search },
{ path: '/register', component: Register },
{ path: '/login', component: Login },
{ path: '*', redirect: '/' }
]
export const router = new VueRouter({
routes
})
I gather that I should be using "watch" or "beforeRouteEnter" but I can't seem to get either to work.
I tried using "watch" like so within my Search component:
watch: {
// Call the method again if the route changes
'$route': 'initializeSearch'
}
And I can't seem to find any documentation explaining how to properly use the beforeRouteEnter callback with a single file component (the vue-router documentation isn't very clear).
Any help on this would be much appreciated.
Since you want to re-populate search results each time a user visits the route.
You can use beforeRouteEnter() in your component as below:
beforeRouteEnter (to, from, next) {
next(vm => {
// access to component's instance using `vm` .
// this is done because this navigation guard is called before the component is created.
// clear your previously populated search results.
// re-populate search results
vm.initializeSearch();
})
}
You can read more about navigation guards here
Here is the working fiddle
This is how my router looks like:
export default new VueRouter({
mode: 'history',
routes: [
/**
* Authentication
*/
{ name: 'login',
path: '/',
component: Login,
guest: true
},
{ name: 'registration',
path: '/registreer',
component: Registration,
guest: true
},
/**
* Forum
*/
{ name: 'forum',
path: '/forum',
component: Forum,
auth: true
},
]
});
Now I would like to get the auth value when I go to /forum. How do I get that value? I can't find anything in the docs.
Already tried this:
router.beforeEach((to, from, next) => {
console.log(to.auth);
next()
});
But nothing show up, only undefined.
Any ideas?
This is a good use case for Vuex - https://vuex.vuejs.org/en/intro.html
Vuex allows you to maintain the state of the application, and also store various API responses so that you do not have to reload the same data in other components.
In your specific case, your forum component can check the Vuex state if auth is available (this can be done in created or mounted handler). If auth is not available, then you should immediately re-route to auth page using this.$router.replace("/login")
In your auth component or login component, you can do the authentication normally. Once the user login is successful, you can store the server response in this.$store.state["auth"] - the Vuex state that is available globally for all components. This can be done as follows (as a mutation in Vuex store):
Vue.set(state, "auth", currentUserDetailsObject)
Afterwards, you may redirect to forum component, where auth is available in this.$store.state and therefore forum may proceed to display the component normally.
You may need some ramp-up time to get used to the concepts of actions and mutations, but you will find it very helpful for the rest of your app, once you get used to it.
I think you could find what you want here.
And you probably want to know about Vuex.
Then you can write code like this.
if (!store.getters.auth) {
next({
path: '/login',
query: {redirect: to.fullPath}
})
}