Create a header options getter in your auth service using RequestOptions, bearer token and an authorization header.
- [Instructor] Let's allow our users to edit their profile account information. Specifically we will allow them to edit their first name and last name. To do that we will first need to determine who the authenticated user is. Previously we placed the user ID inside the token. So all we will need to do is send that authentication token with the edit user request, and then the server can decrypt the token and get the user ID. At that point we can retrieve the specific user by looking up the ID in the users list.
Let's go inside our web service.ts, and we'll create a new function that will give us the user info. So let's scroll down below our post message function and add a new function. We'll call it get user. (typing) Let's return in the http get with the URL as the base plus our users route. And we will also append me to the end of it, to let our service know we wish to get our own data and not another users.
(typing) And for convenience sake I will map our response to JSON. (typing) We now have a web service that will request a secure resource since no other user but the owner of that account should be able to get that info. So we will now need to pass the token as a header to authorize the request. To do that let's go to our auth service.
So let's open up auth.service.ts, and let's add a getter that will give us the token header. So at the top below our last get, let's add a new get. And I'll call it token header. Let's make a new variable called header, (typing) and set it to new headers. Next let's import headers from our angular slash http.
In the parameters we will specify an object with a type of authorization and value bearer plus the token from our local storage. Next we need to create an object that we can pass into our http request called request options. Let's import request options from angular http. Then let's return new request options. And we'll pass in our header through an object.
So let's specify headers and then pass in our new header. Now that we have that let's go back to our web service and use it. We will need to pass it in as the second parameter in our get user http function. So we will first need to import auth service. (typing) then let's inject it with the constructor. (typing) Finally let's pass it in the get call.
So on line 44 let's add it as a second parameter. We'll add this.auth.tokenheader. Since we have no direct way to test this out, let's temporarily make a call to web service .get user inside one of our existing controllers. But before we do let's quickly add a slash in front of our URL on line 44. Just so we stay consistent with the rest of the URLs. Let's open up our message component, and inside the ng in it, let's call this .webservice.getuser.
And we will need to call subscribe on it to execute it. We currently have no user/me route, and we have no way to verify if the request contains an off header. So let's focus on that next before we do the test.
- Setting up the infrastructure
- Displaying data in Angular 2
- Refining your layout with Angular Material
- Getting your data from Node.js
- Saving data to a list
- Creating the component
- Getting your input data
- Creating reactive forms in Angular
- Creating a security middleware
Skill Level Intermediate
Q: This course was updated on 10/17/2017. What changed?
A: We updated five videos to reflect changes to the setup and data retrieval and display processes in Angular 2. For example, instead of using a Git Angular template, the updated course uses the Angular CLI to generate a starting template, for a smooth runtime experience.