So, lets tackle routing.
As mentioned, it would be nice to be redirected
after logging in or after logging out.
So, the trivial way of doing that is the folly:
Here on the Auth page once we're done with logging in,
so here inside of the try plug though, not if we failed,
but instead of try.
So, if we didn't get an error and these actions were done,
then we can reach out to this router and use replaced
to navigate away, replace instead of push
so that we can't go back because if we just log in
going back to the login page doesn't make a lot of sense.
And here we can then go to /coaches for example.
Now, something similar can be done
when we log out.
In the header here when we click log out
besides dispatching we can redirect to /coaches
or to /auth wherever you wanna go.
I'll go to coaches.
Now, that's a simple way of redirecting.
Now, if I do log in here,
and I will log in,
I am on the all coaches page, if a log out
and let's say I go to requests first; I also go to coaches.
Okay, so that works, but that's only the simple way
of doing it because of what if I visit all coaches,
I'm not logged in and I click this login button here?
Now, actually, what I wanted to do here
is probably register as a coach.
We can make this clear up by going to the coaches list
and say, log in to register as coach,
with that text on the button,
if I reload it should be clear what we wanna do here.
So, here after being logged in I probably want to redirect
not to the all coaches page, but to the registration page,
and that's also something we can easily implement with view.
For this on coaches list here
when we link to the off-page on the log
into register button we can add a query parameter.
We can do this on local URLs,
which are resolved by the view router as well.
And for example, add a redirect key
though that key is totally up to you.
It can also just be red
we are going to parse it in a minute,
so, it's up to you.
So, I will name it redirect and say, register here.
Now, with that set if I click on this button,
you can see, now we have this query parameter in the URL,
and now on the Auth page,
we can check for this query parameter.
And if we do have it,
we can redirect the user somewhere else
then our default, which is coaches.
So, for that here, once we did log in or signup,
we can get our redirect URL by accessing this route
query that's a field we can access to there redirect.
And now this here, this property you access on query
has to be the query parameter you are using here.
I'm using redirect here,
so, I wanna access redirect here
that's my redirect URL then.
And actually, I'll add a leading slash in front of that,
so that I go to the slash,
and then whatever is stored in redirect,
which in my case is register,
and that should then lead
to this register route, that's my idea.
Now, actually, of course,
we might not always have a redirect URL
and therefore here I will simply wrap this in brackets
and either you that
or use coaches.
So, this line of code will construct a string
which is either slash and whatever is stored
in the redirect query parameter or /coaches.
And then here we can redirect to our redirect URL,
which we construct like that.
With that, if we now save this,
if I do log in with that query parameters set,
you see I go to the registration page thereafter.
If on the other hand, I clicked just on log in
and therefore I have no query parameter.
I go to the coaches page
and that I would argue is at least a little bit
of a better user experience.
Now, it's not the only thing I wanna do
when it comes to routing though,
because redirecting is nice, but we have a problem.
If I'm not logged in, I can't go to the registration page
there is no button that takes me there, but of course
we can manually enter slash register and end up there.
Sure, we will not be able to submit the data here,
but it would be better to not even let the user go
to this page if you are, she's not authenticated
and we can use navigation guards to prevent this.
You might remember I talked about navigation guards
in the routing module.
Now, we actually need them in this concrete project
to enhance the user experience.
In router js, we can register a global navigation guard
that is triggered before any navigation.
We can attach navigation guards to individual routes.
We can also attach them to components.
I talk about that in the routing module of this course,
so, check that out for more details.
Here, I'm going to use I think pretty elegant approach
of using a global navigation guard
which still only affects certain routes and components.
Now, to create such a global navigation guard,
we use our router and then here we can call before each
and define a function that is executed
before every navigation.
And here we got this tool from next thing,
we got these free parameters.
Now, I will use route metadata,
which are also covered in the routing module
to add special metadata cuter routes
that should be protected,
that would be the registration and the requests routes here.
And actually, also the auth route because here,
I wanna make sure that we can't visit it
if we are logged in,
because if we are logged in going to the Auth page
makes no sense.
So, we can add this meta key to these route conflicts
and then add any data of our choice.
Here in this object
I will set requiresAuth to true,
and I will do the same here for the requests route.
And for the throughout I will add
a requiresUnauth key
and set this to true.
Now, these key names are totally up to you,
these are just the names I will go with.
And the other routes have no metadata attached to them.
They don't have requireAuth or requiresUnauth.
Now, we can use that metadata
in this global navigation guard,
because now we can simply analyze the route we're going to
and check whether it has special metadata,
where we then when I run extra checks.
So, we can check if the route we're going to
on its meta field has requiresAuth.
If that's the case I also wanna check a second condition
in conjunction with the first one.
I wanna check if the user is logged in.
Now, for that we need to access our store though
our view X store, because we have that
is authenticated information in the store.
Well, the good thing is we can not just access
the store in components,
we can also use it in any other JavaScript file.
All we gotta do for that is we have to import it.
We can import our store from the store folder
and there in the index.js file.
And then on this store,
we can access the getters
and check the isAuthenticated getter, just like this.
And this will yield true if the user is authenticated.
So, if we requireAuth
and we are authenticated we'll execute this code.
Now, that of course means that here
I wanna call next because if we requireAuth
and we are authenticated, everything is fine.
More interesting is to scenario
that we requireAuth and we're not authenticated,
hence the exclamation mark in front of the scatter.
Now, I don't want to call next like this,
but instead, I want to redirect the user.
I wanna deny this navigation
for that we can pass false to next,
then the navigation is canceled or we pass a new URL,
a new location object to next.
For example, /auth to redirect the user to the auth page
in case he or she is not authenticated
and wanted to access a page that requires authentication.
Now, that's just one condition I want to check.
Another condition with else if that the page we wanna go to
has the requiresUnauth field,
which would be the case for the auth route.
Then we have a problem if we are authenticated.
So, if this is true now,
if we should not be authenticated,
but we are then I wanna go to,
let's say, /coaches instead of /auth.
And only in the else case,
we allowed a navigation and continue as planned.
And now, we have a global navigation guard,
which still takes route-specific settings into account.
Now, I'm not using the from argument here,
so, I'll replace that with an underscore.
And if we now saved it, we can give this a try.
If I reload on the auth page that works.
If I try to visit the Vue register page,
I'm redirected to Auth instead.
If I try to visit /coaches that works.
If I try to visit /requests
that does not work and I'm back on auth.
Now, if I do auth here,
now, we can move around,
but I can't really test the auth case,
so, that am authenticated and I want to visit /auth
because if we enter this manually in the URL at the moment,
we lose all stored authentication status anyways,
and therefore we are considered as locked out
because at the moment I'm only storing auth information
in UX and whenever we enter something into URL,
and hit Enter we restart Vue app in the end,
and that clears all the UX data.
So, we can't this scenario, but we see that for register
and for request we are redirected.
So, our logic here seems to work as intended
and that's a navigation guard in action.