Transcript for:
Vue and Nuxt Navigation Guards

all right what's going on everyone in view you might be familiar with navigation or route guards with view router these are primarily used as a name suggest to guard navigations either by redirecting or canceling the route navigation when a user navigates we might want to check for a certain condition if that condition is met we'll allow them to continue to that route if not then we might want to block the navigation and redirect the user somewhere in the simplest form you can register a global guard within the view router using the before each method this accepts the Target Route with the two pram and the current route with the from pram within the before each method you're able to Define logic such as checking if the user is authenticated and allow them to continue to the route or cancel it by returning false now within Nu navigation guards work slightly different instead of using a before each method like within view you instead use what is called route middleware now there are three types of Route middleware within Nu the first is inline middleware that can be defined directly on the page itself this gets defined within the defined page meta macro within the middleware property and this property accepts an array and within this array we can pass a function which is going to accept the two and from Pam and within this function you're able to Define some logic that you only want to be executed on this particular page for example maybe you might want to check that this route does not contain a pram of 123 and if it does we'll return the abort navigation utility and this will take take us to the default Nu air page and if you want you can also include a custom air object and pass in a status code and a message now if this pram does not match what we're looking for we can do nothing and this will allow the continuation to this route and in the application when navigating to this page with the Pam of 123 it's going to aboard the navigation and it's going to redirect us to the air page with the error that we Define and if we don't have this pram defined of 1 12 three it will allow us to continue to that route the next type of middleware that we have is called named route middleware these are files that you create within the middleware directory and then these can be added to Pages within your next application for example maybe in an application we might want to check certain routes to ensure that a users authenticated before we continue to that page this would be a great use case for some named route middleware and it's exactly what I did with an application I built called webdev daily so inside of the middleware directory we're going to create a new type file called off user and within this file we're going to want to export default the defin Nu route middleware utility and for this example I actually went ahead and use superbase for the application so what we can do is use the use superbase user composable and check to see if the user is true now if we don't have a user logged in and this equates to false we can then use the navigate to utility and direct the user to a page of your choice which most commonly might be the login page and if we do have a user logged in and it equates to true we don't need to do anything we'll let the user continue to that page and with our named route middle work created we're going to need to add this two pages of our choice so we'll just add it here within the editor page within webdev daily to ensure users are logged in before they can access this particular page now to add the route middleware we're again going to use the defin page metam macro and then we'll Define the middleware property which accepts an array and we can pass our middleware file as a string within here now as a heads up under the hood Nu normalizes all route middleware to Kebab case so instead of defining off user as cam case in this array it will actually be off dash user and now here inside of this application I'm not currently logged in so when I attemp to navigate to this editor page it's going to direct us back to the login page now once we are logged in the user will equate true and this will allow us to continue to that route now the last type of Route middleware we have is global and this is going to run in every single route now to define global middleware you're still going to place the types scare file inside of the middleware directory but you're going to want to append the global suffix on the end of the file name and defining the middleware itself is exactly the same as we've seen with the name middleware except we don't actually need to Define on what pages is executed it's going to run in every single route change so for this example let's just keep it simple and council. log the two in from pram and now if we head back back into the application on every route change that we have we're going to see that being logged out to the console now as we've seen so far there are two types of Route middleware we have Global and then we have page defined either via a name middleware file or inline directly on the page now in terms of order Global route middleware will always be executed first followed by any page defined middleware in the order in which is defined in that array so let's say we have a global middleware file a named middleware file and then some inline middleware the global file is going to be executed first followed by the order of the middleware property on the page itself so in this case since the name middleware file comes first in the array it's going to be executed prior to the inline middleware function now in the event that you have multiple Global middleware files by default they're going to be executed alphabetically based on the file name if you do want control over the order you can prefix them with alphabetical numbering let's take the previous example and let's go ahead and add an addition Global middleware by default the order would be the analytics. global followed by the council. global now let's say for example we want to have the council. global middleware file executed first so what we would need to do is prefix the file with alphabetical numbering so we would need to prefix 01 in front of the council Global file followed by 02 in front of the analytics Global file and the zero in front of the numbers are very important since file names are sorted as strings so if you don't add this you could run into some issues with ordering now if your application is server side rendered the middleware for the initial page will be executed both on the server and the client which is similar to how data fetching works on the initial load if you do want more control over this Behavior you can check for this by referencing The import. Meta server or import. meeta client to skip running the middleware on the server or the client entirely and this could be useful if you're looking to reference a value from local or session storage in your middleware where you would not want to have that run on the server since it would not be available all right so that's going to wrap it up for this video hopefully you found this helpful if you did be sure to leave a like And subscribe to the channel and I'll see you in the next one take care