Narrator: So, lets tackle routing. 2 2
As mentioned, it would be nice to be redirected 3 3
after logging in or after logging out. 4 4
So, the trivial way of doing that is the folly: 5 5
Here on the Auth page once we're done with logging in, 6 6
so here inside of the try plug though, not if we failed, 7 7
but instead of try. 8 8
So, if we didn't get an error and these actions were done, 9 9
then we can reach out to this router and use replaced 10 10
to navigate away, replace instead of push 11 11
so that we can't go back because if we just log in 12 12
going back to the login page doesn't make a lot of sense. 13 13
And here we can then go to /coaches for example. 14 14
Now, something similar can be done 15 15
when we log out. 16 16
In the header here when we click log out 17 17
besides dispatching we can redirect to /coaches 18 18
or to /auth wherever you wanna go. 19 19
I'll go to coaches. 20 20
Now, that's a simple way of redirecting. 21 21
Now, if I do log in here, 22 22
and I will log in, 23 23
I am on the all coaches page, if a log out 24 24
and let's say I go to requests first; I also go to coaches. 25 25
Okay, so that works, but that's only the simple way 26 26
of doing it because of what if I visit all coaches, 27 27
I'm not logged in and I click this login button here? 28 28
Now, actually, what I wanted to do here 29 29
is probably register as a coach. 30 30
We can make this clear up by going to the coaches list 31 31
and say, log in to register as coach, 32 32
with that text on the button, 33 33
if I reload it should be clear what we wanna do here. 34 34
So, here after being logged in I probably want to redirect 35 35
not to the all coaches page, but to the registration page, 36 36
and that's also something we can easily implement with view. 37 37
For this on coaches list here 38 38
when we link to the off-page on the log 39 39
into register button we can add a query parameter. 40 40
We can do this on local URLs, 41 41
which are resolved by the view router as well. 42 42
And for example, add a redirect key 43 43
though that key is totally up to you. 44 44
It can also just be red 45 45
we are going to parse it in a minute, 46 46
so, it's up to you. 47 47
So, I will name it redirect and say, register here. 48 48
Now, with that set if I click on this button, 49 49
you can see, now we have this query parameter in the URL, 50 50
and now on the Auth page, 51 51
we can check for this query parameter. 52 52
And if we do have it, 53 53
we can redirect the user somewhere else 54 54
then our default, which is coaches. 55 55
So, for that here, once we did log in or signup, 56 56
we can get our redirect URL by accessing this route 57 57
query that's a field we can access to there redirect. 58 58
And now this here, this property you access on query 59 59
has to be the query parameter you are using here. 60 60
I'm using redirect here, 61 61
so, I wanna access redirect here 62 62
that's my redirect URL then. 63 63
And actually, I'll add a leading slash in front of that, 64 64
so that I go to the slash, 65 65
and then whatever is stored in redirect, 66 66
which in my case is register, 67 67
and that should then lead 68 68
to this register route, that's my idea. 69 69
Now, actually, of course, 70 70
we might not always have a redirect URL 71 71
and therefore here I will simply wrap this in brackets 72 72
and either you that 73 73
or use coaches. 74 74
So, this line of code will construct a string 75 75
which is either slash and whatever is stored 76 76
in the redirect query parameter or /coaches. 77 77
And then here we can redirect to our redirect URL, 78 78
which we construct like that. 79 79
With that, if we now save this, 80 80
if I do log in with that query parameters set, 81 81
you see I go to the registration page thereafter. 82 82
If on the other hand, I clicked just on log in 83 83
and therefore I have no query parameter. 84 84
I go to the coaches page 85 85
and that I would argue is at least a little bit 86 86
of a better user experience. 87 87
Now, it's not the only thing I wanna do 88 88
when it comes to routing though, 89 89
because redirecting is nice, but we have a problem. 90 90
If I'm not logged in, I can't go to the registration page 91 91
there is no button that takes me there, but of course 92 92
we can manually enter slash register and end up there. 93 93
Sure, we will not be able to submit the data here, 94 94
but it would be better to not even let the user go 95 95
to this page if you are, she's not authenticated 96 96
and we can use navigation guards to prevent this. 97 97
You might remember I talked about navigation guards 98 98
in the routing module. 99 99
Now, we actually need them in this concrete project 100 100
to enhance the user experience. 101 101
In router js, we can register a global navigation guard 102 102
that is triggered before any navigation. 103 103
We can attach navigation guards to individual routes. 104 104
We can also attach them to components. 105 105
I talk about that in the routing module of this course, 106 106
so, check that out for more details. 107 107
Here, I'm going to use I think pretty elegant approach 108 108
of using a global navigation guard 109 109
which still only affects certain routes and components. 110 110
Now, to create such a global navigation guard, 111 111
we use our router and then here we can call before each 112 112
and define a function that is executed 113 113
before every navigation. 114 114
And here we got this tool from next thing, 115 115
we got these free parameters. 116 116
Now, I will use route metadata, 117 117
which are also covered in the routing module 118 118
to add special metadata cuter routes 119 119
that should be protected, 120 120
that would be the registration and the requests routes here. 121 121
And actually, also the auth route because here, 122 122
I wanna make sure that we can't visit it 123 123
if we are logged in, 124 124
because if we are logged in going to the Auth page 125 125
makes no sense. 126 126
So, we can add this meta key to these route conflicts 127 127
and then add any data of our choice. 128 128
Here in this object 129 129
I will set requiresAuth to true, 130 130
and I will do the same here for the requests route. 131 131
And for the throughout I will add 132 132
a requiresUnauth key 133 133
and set this to true. 134 134
Now, these key names are totally up to you, 135 135
these are just the names I will go with. 136 136
And the other routes have no metadata attached to them. 137 137
They don't have requireAuth or requiresUnauth. 138 138
Now, we can use that metadata 139 139
in this global navigation guard, 140 140
because now we can simply analyze the route we're going to 141 141
and check whether it has special metadata, 142 142
where we then when I run extra checks. 143 143
So, we can check if the route we're going to 144 144
on its meta field has requiresAuth. 145 145
If that's the case I also wanna check a second condition 146 146
in conjunction with the first one. 147 147
I wanna check if the user is logged in. 148 148
Now, for that we need to access our store though 149 149
our view X store, because we have that 150 150
is authenticated information in the store. 151 151
Well, the good thing is we can not just access 152 152
the store in components, 153 153
we can also use it in any other JavaScript file. 154 154
All we gotta do for that is we have to import it. 155 155
We can import our store from the store folder 156 156
and there in the index.js file. 157 157
And then on this store, 158 158
we can access the getters 159 159
and check the isAuthenticated getter, just like this. 160 160
And this will yield true if the user is authenticated. 161 161
So, if we requireAuth 162 162
and we are authenticated we'll execute this code. 163 163
Now, that of course means that here 164 164
I wanna call next because if we requireAuth 165 165
and we are authenticated, everything is fine. 166 166
More interesting is to scenario 167 167
that we requireAuth and we're not authenticated, 168 168
hence the exclamation mark in front of the scatter. 169 169
Now, I don't want to call next like this, 170 170
but instead, I want to redirect the user. 171 171
I wanna deny this navigation 172 172
for that we can pass false to next, 173 173
then the navigation is canceled or we pass a new URL, 174 174
a new location object to next. 175 175
For example, /auth to redirect the user to the auth page 176 176
in case he or she is not authenticated 177 177
and wanted to access a page that requires authentication. 178 178
Now, that's just one condition I want to check. 179 179
Another condition with else if that the page we wanna go to 180 180
has the requiresUnauth field, 181 181
which would be the case for the auth route. 182 182
Then we have a problem if we are authenticated. 183 183
So, if this is true now, 184 184
if we should not be authenticated, 185 185
but we are then I wanna go to, 186 186
let's say, /coaches instead of /auth. 187 187
And only in the else case, 188 188
we allowed a navigation and continue as planned. 189 189
And now, we have a global navigation guard, 190 190
which still takes route-specific settings into account. 191 191
Now, I'm not using the from argument here, 192 192
so, I'll replace that with an underscore. 193 193
And if we now saved it, we can give this a try. 194 194
If I reload on the auth page that works. 195 195
If I try to visit the Vue register page, 196 196
I'm redirected to Auth instead. 197 197
If I try to visit /coaches that works. 198 198
If I try to visit /requests 199 199
that does not work and I'm back on auth. 200 200
Now, if I do auth here, 201 201
now, we can move around, 202 202
but I can't really test the auth case, 203 203
so, that am authenticated and I want to visit /auth 204 204
because if we enter this manually in the URL at the moment, 205 205
we lose all stored authentication status anyways, 206 206
and therefore we are considered as locked out 207 207
because at the moment I'm only storing auth information 208 208
in UX and whenever we enter something into URL, 209 209
and hit Enter we restart Vue app in the end, 210 210
and that clears all the UX data. 211 211
So, we can't this scenario, but we see that for register 212 212
and for request we are redirected. 213 213
So, our logic here seems to work as intended 214 214
and that's a navigation guard in action.