Configuring a middleware with Vue Router
A middleware is an old and powerful concept that we have in software development, it is really useful when we have routing related patterns in our applications.
If you’re not sure about the meaning of middleware, there is a Simple Explanation of Express Middleware that can help you to learn more about how them work (at least in Express and Node, but the concept is the same).
But, is this only for backend? No, actually is very common in both (frontend or backend) when you have routing in your application, and we are using this concept since Single Page Applications appeared in our lives.
And… do my SPA website need this?
There are some examples that can explain when you can use a middleware:
- Don’t allow users that didn’t logged into your website to visit a page.
- Allow only certain types of users to see a page (Roles: Administrator, Editor, etc.)
- Reset settings or clean storage.
- Only allow to access to a page logged users older than a certain age.
And some others…
I really need this! How can I use with Vue?
Navigation Guards are really great, and let us to call a function before enter into a route, before it updates and before leaves
…or you can use global guards.
At this point you can start to see that, to move from this to have real middlewares is going to be easy, let’s see a simplified example:
First, we define a mock user, imagine that you have a service, global state or something that returns to you the current user.
Now, we can create our “real” example with middlewares:
Was really simple, all the pieces were there and we have only to join them 🤙
And you? How do you use middlewares with Vue?
Bonus: Vue Router has also In Component Guards that are really nice to get data before enter into a page.
Bonus2: If you read the docs you will discover that you can pass the next route to next() function, for example to redirect to login next(‘/login’)