7 days of WordPress plugins, themes & templates - for free!* Unlimited asset downloads! Start 7-Day Free Trial

Next lesson playing in 5 seconds

  • Overview
  • Transcript

4.2 Fetching Feeds

Now that we can authenticate all of our requests, we need to start implementing them. And the first is going to be fetching our feeds. So, let's just jump right in inside of api.js that we created in the previous lesson, we are going to add to our routes. So, we will want to add a getRequest. The endpoint is simply going to be feeds. And this feeds endpoint is going to work for getting our feeds, for creating a feed with a post request as well as deleting a feed with a delete request. So, those are our endpoints and we just need to use the isAuthenticated middleware, and did that just say isAuthenticate? Yes. So that is isAuthenticated, I wanted to use that. All right, so now that we are using that middleware, all we have to do is handle the request. So we we'll have our request and response and this is going to be very simple. All we need to do is send an object that has a feeds property. And then we already have the feeds, because we have already retrieved the user from our data store, so, we will just use its feeds property, there we go. We have implemented that. Now, we have not added these routes yet, I say these, we haven't added this route to our application. So let's go to app.js. And we want to require those we'll call this apiRoutes, and we will pull in that api file, so that then we can use them and then we will be able to request them. All right, so with that in place, let's go ahead and let's wire up the functionality on the client. So, let's go to our client's code, and there's quite a bit that we need to do here. So let's start inside of our HTTP module, because we don't have a function for making a getRequest. However, we do need to make some modifications here because we need our headers for every request that we need. So it makes sense to kind of break this out into a function that we will call simply getHeaders. And we will do this, we will create the headers object, we will append the Content-Type, and then we will return headers. But then we need to see if we have a token. So, let's get that token, we will use localStorage. We'll call the getItem method and we want that auth-token item. So if we have this, then we of course want to add the header to the request. So, all we have to do is check if we have a token and then add that header. Now, this is the authorization header which there are some standards that we have to follow. As far as a Bearer token is concerned we need to include the string Bearer followed by space and then the token itself. And as long as we follow that then we are good. Now, really we don't have to follow that, but it's kind of standard. So, we are going to follow that. So if we have a token, then we have our authorization header added and so we can make that request. We will change our postJson so that's we will call that getHeaders function, and then that will be good there. We do need a function for making a getRequest. So let's just copy and paste and make the necessary changes. The first is going to be the method, this is a getRequest. And then we need to get rid of the body because getRequests do not have a body, and that's it. We are in vue, aren't we, yes. So instead of module exports, we are going to export and then we will have our getJson function as well. Now, we need to make a decision here, because all of our requests are going to result in one of two things. Either we are going to get what we want, or we are going to get a 401 not authorized. And if we get a 401 not authorized, then the question becomes, what do we do with that? Do we redirect to the login, and that makes sense to me. So, then the question is, do we want to do that directly here inside of this HTTP module? Because if we don't do it here, then we're gonna have to go into our Vuex store, and we are going to have to check make sure that all of the requests are authorized. And if not, then we would have to redirect and that seems like a lot to me. So this is questionable. There are arguments to go ahead and write the code inside of our HTTP module to redirect our vue router to the login inside of this file. There's also arguments against that. I'm going to err on the side of simplicity, because it seems much more simple to do this here so that it's automatic and we don't have to worry about that anymore. So, in order to do this, we need our router. So, of course, we're going to import that from our router. And we will have that file right there. And also, since this is something that we are going to do for just about every request, it's kind of makes sense to write a function to have that functionality so that we can then use it in all of our request functions. And we'll call this checkAuth where we are going to work with the response. And all we will need to do is check the status if it is a 401, that's what we used, isn't it? Then we will simply use our router and we will push to Login. But then even if we do go to the login, we will need the data from the response. So we will simply use the json method there. So that should work so that now we should be able to just use this checkAuth for the get and post functions. Okay, so now that we have this getJson function, we can use this inside of our data store. The first thing we need to do is include that, so we will have getJson there. And we need an action, we have a getFeeds, but we don't have a get, well, we have a getFeed, but we don't have a getFeeds. So, we will add getFeeds. We just need commit, and we are going to return, we're gonna call getJson, and the url is going to be ' /feeds. We don't need anything else there, we are automatically handling unauthorized requests. We are also automatically converting the response to Json. So, then what we need is to check to see if we have some feeds. And if we do then we want to go ahead and commit those to our data store. So we will check the data for the feeds property. If we have it, then we will simply commit. We'll call this setFeeds and then we will pass in the feeds that we want to set. So that should work, we'll return data so that's if we need to use that in whatever is consuming this then we will have access to it. All right, so we need this setFeeds mutation. So let's go to our mutations and let's put this after the setArticles. So we will have our state, we will have our feeds and we will simply set the feeds in our state to the feeds supplied by the function, that seems good. So now, this is just a chain, you have to do this, in order to do this, in order to do this. So now we should be able to go to our feeds, and we should be able to just kick off this whole thing. And really, we don't need a function to do this. We should be able to just say store.dispatch, and we will call getFeeds. So, that should work. We'll see, let's go to the browser. Let's do a hard refresh. And something's not right because we are seeing our feeds here and we should be overriding that with whatever is given to us by the server. Okay, so we can see that we have failed to fetch. Let's take a look at the network. And let's do a hard refresh here. Let's see what we are getting as a response from the server. So here are our feeds. They failed for some reason. So let's take a look at the response, we aren't getting really anything. We can see that the Bearer token is being included, so that's great. So let's take a look at our console for the server application. We can see app use requires a middleware function. Yes it does because we forgot to export that route, didn't we?. We certainly did. So, we will simply say module.exports and the router. So with that done, we'll see our server application recompile. This should work now. So let's do a hard refresh. Nothing is going right, is it? So, let's see what else happens here. We are making a request for feeds, it is still pending, it still failed. So, let's go to the console, once again, next is not defined. That is an api.js. So let's take a look at that file. And yes, it is not defined inside of our middleware because of a keystroke. So, now hopefully let's see this recompile. Let's go back to the browser and let's do a hard refresh. There we go, that is what we expected to see because we don't have any feeds. We still see the UI, so everything is good there. So now what we need to do is write the code for adding a feed so that we can see our new feed in the UI. And we will do that in the next lesson.

Back to the top