1
00:00:00,270 --> 00:00:06,630
In this lecture, we are going to redirect the user programmatically, in some cases, we may need to

2
00:00:06,630 --> 00:00:13,800
redirect the user after our app has performed an action, for example, a user may need to be redirected

3
00:00:13,800 --> 00:00:17,910
after logging out if they're on a page that requires authentication.

4
00:00:18,180 --> 00:00:21,630
We shouldn't trust the user to navigate to a different page.

5
00:00:22,170 --> 00:00:25,140
We can force redirection by injecting the router.

6
00:00:25,470 --> 00:00:30,630
In the resource section of this lecture, I provide a link to a class called router.

7
00:00:30,930 --> 00:00:36,030
This class can be injected into our app after we've imported the router module.

8
00:00:36,390 --> 00:00:42,540
We can interact with the router by calling the methods provided by this class on the sidebar.

9
00:00:42,570 --> 00:00:45,840
We will find a list of methods defined in this class.

10
00:00:46,140 --> 00:00:50,070
The method we're interested in is called navigate by URL.

11
00:00:50,460 --> 00:00:56,700
It's the simplest method at our disposal for redirecting a user according to the documentation.

12
00:00:56,820 --> 00:00:58,440
There are two parameters.

13
00:00:58,710 --> 00:01:02,520
The first parameter is the path to redirect the user to.

14
00:01:02,940 --> 00:01:07,320
The second parameter is an optional object of additional settings.

15
00:01:07,860 --> 00:01:14,640
The value returned by this method is a promise that resolve to a Boolean value, and it's always considered

16
00:01:14,640 --> 00:01:19,530
good practice to consult the documentation whenever we're learning a new method.

17
00:01:20,010 --> 00:01:23,430
We don't want to overlook any piece of critical information.

18
00:01:23,610 --> 00:01:24,810
Let's give it a try.

19
00:01:25,110 --> 00:01:27,870
Open the navigation component class file.

20
00:01:30,220 --> 00:01:36,670
Inside this class, we are going to inject B router class at the top of the file import, the router

21
00:01:36,670 --> 00:01:39,640
class from the angular slash router package.

22
00:01:41,960 --> 00:01:47,330
Next, in the constructor function, inject the router class with the name router.

23
00:01:49,760 --> 00:01:56,270
Lastly, let's update the log out method, this method is responsible for logging the user out of the

24
00:01:56,270 --> 00:01:57,080
application.

25
00:01:57,350 --> 00:02:02,840
We will redirect the user after they've successfully logged out at the end of the method.

26
00:02:02,930 --> 00:02:09,410
We will call the this doc router DOT navigate by URL function with the await keyword.

27
00:02:11,880 --> 00:02:16,440
Keep in mind, the documentation stated, this method returns a promise.

28
00:02:16,710 --> 00:02:20,760
We should add the await keyword to wait for the value to resolve.

29
00:02:21,060 --> 00:02:24,360
Next, we need to pass in an absolute path.

30
00:02:26,600 --> 00:02:32,840
Understanding the differences between absolute and relative paths is key to understanding the behavior

31
00:02:32,840 --> 00:02:38,330
of a router, the router can be configured to work with absolute or relative paths.

32
00:02:38,570 --> 00:02:39,950
But what are the differences?

33
00:02:40,220 --> 00:02:43,430
Let's say we had a path called some slash path.

34
00:02:44,000 --> 00:02:47,720
We may want to redirect the user to a path called example.

35
00:02:48,230 --> 00:02:54,470
An absolute path will redirect the user to the new path relative to the base path of our app.

36
00:02:54,800 --> 00:02:58,310
In our case, the base path is a forward slash.

37
00:02:58,610 --> 00:03:03,050
Therefore, the user will be redirected to the slash example.

38
00:03:03,320 --> 00:03:09,530
It doesn't matter how deeply nested we are in the URL, the new path will always be appended to the

39
00:03:09,530 --> 00:03:10,400
base path.

40
00:03:10,820 --> 00:03:15,200
On the other hand, a relative path gets appended to the current route.

41
00:03:15,500 --> 00:03:21,290
As a result, the new path will be some slash path slash example.

42
00:03:21,650 --> 00:03:24,260
A completely different path gets produced.

43
00:03:24,590 --> 00:03:29,090
Relative paths can be tricky because the new path may be unpredictable.

44
00:03:29,390 --> 00:03:34,520
However, they may be what you're looking for in some situations, in my opinion.

45
00:03:34,730 --> 00:03:37,130
Absolute paths are easier to write.

46
00:03:37,400 --> 00:03:44,240
However, we will be looking at some examples of when you may want to use relative paths over absolute

47
00:03:44,240 --> 00:03:44,840
paths.

48
00:03:45,970 --> 00:03:48,760
Relative paths will not work with this method.

49
00:03:49,090 --> 00:03:55,270
It's possible to navigate with relative paths, but we will explore other options in another lecture.

50
00:03:55,540 --> 00:04:00,820
Let's redirect the user to the home page by passing in a forward slash character.

51
00:04:03,340 --> 00:04:06,940
We aren't going to pass that an object for the second argument.

52
00:04:07,240 --> 00:04:10,270
We don't need to configure the behavior of the method.

53
00:04:10,600 --> 00:04:13,450
Let's give our method a test in the browser.

54
00:04:13,540 --> 00:04:15,670
Make sure you're logged into the app.

55
00:04:18,250 --> 00:04:23,560
Next, let's navigate to the Manage page before pressing the log out button.

56
00:04:23,920 --> 00:04:29,500
Almost immediately after pressing the log out link, we are redirected to the home page.

57
00:04:29,800 --> 00:04:33,600
We've achieved the behavior we wanted in the next lecture.

58
00:04:33,610 --> 00:04:39,310
We are going to improve this behavior by checking the page before redirecting the user.