Adding Instructor Role

[00:00 - 00:05] We are almost done with our course now. We are left with giving the instructors an option to make courses.

[00:06 - 00:13] But before that, we can give option to our students to become an instructor. With the token, we are sending role of the user.

[00:14 - 00:20] So we can de-structure it and mention it inside the user model. So let me go to the user model.

[00:21 - 00:35] And now inside our user, we can also have a roles property, which is again can be optional. And here we can use it as an array of string. So let me write string and make it an array.

[00:36 - 00:46] Now that we have added rules property inside the user model, we can extract this property from our token. But before that, let's see what our token has.

[00:47 - 00:50] Let's open the browser. Make sure you are logged in.

[00:51 - 00:58] So let me log in as a student. Make sure you are logged in.

[00:59 - 01:06] Now you can open Redux tools. And from the user, you can simply copy the token.

[01:07 - 01:20] And now we can open jwt.io. And here we can paste our token to see what our token has.

[01:21 - 01:30] Now we see the username, the email address and user role. If you don't see claims slash role here, try to drop the database and redone the server.

[01:31 - 01:36] Let's do one thing. Let's do it together. I'm doing it for the people who don't see the role property here.

[01:37 - 01:42] If you can see this, you don't have to drop the database. So let's go back to the terminal.

[01:43 - 02:02] And now we can shut the server, go back to our root project. And press Y to drop it.

[02:03 - 02:10] And now it has successfully dropped our database. Now let's go back to the API project and redone our server.

[02:11 - 02:24] Now let's go back to the browser. Log out.

[02:25 - 02:37] And log in as a student again. We don't see any causes anymore, but that's okay.

[02:38 - 02:48] The main point is checking the token. Again, open user and copy the token.

[02:49 - 02:56] And go back to jwt.io and paste the token here. I hope you are able to see the role now.

[02:57 - 03:04] So as you can see here, our roles have this key. So we can go back to the user slice.

[03:05 - 03:18] Let's open user slice and inside set user function. So here we can here decode the token using a top method.

[03:19 - 03:26] So let's simply get rid of this for now. And here let's create claims.

[03:27 - 03:38] For our claims, we will use a top method. And inside we will use action.payload.token.

[03:39 - 03:47] And from our token, we want to split it by a dot. So here we can mention dot.

[03:48 - 03:54] And now we want the first part. Let's go back to the browser.

[03:55 - 04:01] We are splitting it by a dot. And this is the part where our claims are located.

[04:02 - 04:08] So we want this part specifically. And now we want value for this key.

[04:09 - 04:14] So we can copy it from here. So let me write the key here.

[04:15 - 04:25] And on top, we want to parse it. So we can write json.pass and mention that function.

[04:26 - 04:36] Now let's cut it again. And now our roles will be equal to claims with this particular key.

[04:37 - 04:46] And below this, we can finally set our state. So here let's mention state dot user and make it equal to.

[04:47 - 04:57] And here we can mention dot dot dot action dot payload. And after that, we need to mention the roles.

[04:58 - 05:04] Now the roles can be a string or an array of a string. So we can check if type of roles is a string.

[05:05 - 05:17] So let me write if type of roles. If it is a string, in this case, we will mention it inside an array.

[05:18 - 05:25] Otherwise, we can keep it as it is because it is already an array. Because if it is not a string, it will be an array.

[05:26 - 05:31] So we don't have to do it manually. Now we can use the same logic inside the fulfill state.

[05:32 - 05:41] So let's copy this part. And let's go back to the extra reducers and inside the fulfilled part.

[05:42 - 05:50] We can simply cut it and paste that particular logic. Now we can use rules to show an instructor page.

[05:51 - 06:02] So let's go back to the user menu. And here we can show an extra menu item for the instructors.

[06:03 - 06:12] So here we can check if the user has a role of an instructor. If they have, we can show a link to the instructor page.

[06:13 - 06:21] And for that, we'll need user roles. So what we can do is here, we can de-structure the user from use app selector.

[06:22 - 06:42] From the state and here we will mention state.user. Now here we can check if user.roles.inclutes.

[06:43 - 06:57] If it includes the instructor field, in that case we can show the menu item of an instructor. So let's simply copy it and paste it here.

[06:58 - 07:03] And it will go to the instructor page. We haven't created it yet, but we will do it soon.

[07:04 - 07:15] And here we can write instructor. Let's open the browser and see if we can see that option.

[07:16 - 07:32] Let's try to refresh it. And right now we don't see the option, but if we log in as an instructor, let's log in again as an instructor.

[07:33 - 07:41] Now we see the option of an instructor. Now before working on the instructor page, let's give an option to students to become an instructor.

[07:42 - 07:44] Let's do that in the next lesson.