Okay, let's work on showing and hiding certain links based on our authorization status. For example, if we're not logged in, we should not see some of these links up here. So let's start with that. So I'm currently not logged in, so we should not see create, me, admin, or logout. So let's keep a piece of state that tracks if we're logged in or not. So our menu lives in app.vue, so we can do it in here. If this were a real app, you would make use of a central store like Vuex, but in this case it's just a demo, so we'll put it in here. So let's make a computed property here, say computed, and let's just say loggedIn. And let's just return if there's an item in local storage with the key of ApolloToken.

So let's make a computed property here, say computed, and let's just say loggedIn. And let's just return if there's an item in local storage with the key of ApolloToken. And if there is, it will return the token and that will be a truthy value. But if there isn't, then it will be null, which is a falsy value. So we can use that up here on our links. So for these ones, create, me, admin, and logout, we have to be loggedIn to see those links. So v-if loggedIn. And for the other ones, actually we need it for this one as well. So let's add it here, loggedIn.

And for the other ones, actually we need it for this one as well. So let's add it here, loggedIn. And for the other ones, it's the opposite case. So if we're not loggedIn. So let's add it to these two here. Register and LogIn. And it should be not loggedIn. Okay, so now the menu should be correct. Sorry, it should be localStorage.getItem. So getItem.

And that looks better. So now if we do log in, let's log in with Andre's email. And you can see the links update up here. So now we get the links that require us to be logged in. So this admin link is more specific, it requires us to be an admin. So let's accommodate for that as well. So we have to make a query here to check if we're an admin. So let's do that here, say Apollo. And let's name the variable me. We can say query GQL `.

And let's name the variable me. We can say query GQL backticks. And the query is query me. And we just need the ID here, or sorry, not the ID is admin. Okay, let's make sure to add our comma here. Let's save that. And now we should have access to this me variable. And we can use that to check if the admin link should show as well. So if loggedIn and me.isAdmin, let's use optional chaining with a question mark just in case.

So if logged in and me.isAdmin, let's use optional chaining with a question mark just in case. So save that I am logged in as an admin. So it should still show. And it does. But let me log out here. And let's log in as someone who's not an admin to make sure it doesn't show. Okay, so I'm logged in as person. This person is not an admin, and it doesn't show here. Okay, now let's work on the update links.

This person is not an admin, and it doesn't show here. Okay, now let's work on the update links. So right now update shows for any Post here. So for example, for this Post, I didn't create this Post, but update still shows here. So we only wanted to show when we're able to update the Post. So on this page, we're already making a query for the Post here. So we can add on the postUserId. So let's start with that. So this should be on the Post page. And down here should be the query.

So this should be on the Post page. And down here should be the query. Or where is it? Right here. So we're grabbing the Post, we can also grab the posts user, and we need their ID. Okay. But we also want to grab the logged in user. So we can make use of that me query again. So we have to add another field here, me query. And it's the same thing.

So we have to add another field here, me query. And it's the same thing. So GQL backticks. And the query is me, and we only need this person's ID. Okay, let's put a comment here. Now we can put a conditional on that update link. So where is it? Up here somewhere. So right here. And it also contains the delete button.

So right here. And it also contains the delete button. So that will handle that case as well. So say $vf equals. So we have $post->user->id. And we want to make sure that equals the logged in user's ID. So we have $me->id. Autocompleting to methods, $me->id. Okay. So let's save this.

Okay. So let's save this. And as you see, the update link is gone, because I'm logged in as Person. And Person should not be able to update or delete Andre's post. But if I go back to my own post here, it does show and it still works. Cool. Now we have to handle the case when the User just goes to the page directly. Again, let's go to a post that's not mine. And we don't see the link here, but we can just go to the URL. And it does show here.

So let's grab this. Let's go to our update page. Let's add this to our Apollo query. So right here, let's add that. Okay. And we have a watcher here to update the post. But we can also use this to check if the logged in user should be able to access this page. And if not, we can just redirect them to another page. So it's better conditional here. So we have this new post variable.

So it's better conditional here. So we have this new post variable. So if this user's ID does not equal this.me.id, then go ahead and redirect. And we'll just do a traditional redirect here using window.location.href. And we'll just redirect back to the homepage. Okay, so let's try this out. Back here. If I refresh this page, and we're still on this page, and we shouldn't be able to access this. I think I forgot something here.

access this. I think I forgot something here. Yeah, I think I forgot to add the user here. So userId. Okay. And if I go back, let's refresh this, you'll see that we're redirected back to the homepage. So again, I'm logged in as Person. We can see the update link here, but we try to go to it manually. And then we are redirected back to the homepage because we shouldn't be able to access that page.

And then we are redirected back to the homepage because we shouldn't be able to access that page. And I guess we should do something similar for the admin page. So right now I'm not in admin, but I can still hit the link. So let's redirect as well in this case. So let's grab the me query here. Let's go to admin. Let's add that to our query here. Okay. Actually, we just need to check if we're in admin, so we can change this to isAdmin.

Okay. Actually, we just need to check if we're in admin, so we can change this to isAdmin. Okay. And let's just grab the watcher from the other page here. So where is it? Up here. Okay. Let's go back to our admin. Let's paste it here. And we can just watch for the me variable.

Let's paste it here. And we can just watch for the me variable. So we can say new me, we don't need this. And we can just check the isAdmin field here. So if new me.isAdmin, or if it's not an admin, so it's is_admin, should be not, then go ahead and redirect. So let's try this out. Let's refresh here. Sorry, we're watching the me variable here. So we should change this.

Sorry, we're watching the me variable here. So we should change this. Let's try that again. And it was redirected. So one more time, we try to go to admin, and we're not logged in as an admin, and we should be redirected. Cool. So yeah, that's the gist of it. We need access to the logged in user's ID, and then we can compare against that to show or hide our links.

We need access to the logged in user's ID, and then we can compare against that to show or hide our links. So let's go ahead and make a commit here, git add, git commit. Let's say show or hide our links. So yeah, that's going to do it for this series. There's obviously a lot to GraphQL, and we could continue, but I think this is a good place to end it. We've learned a lot about GraphQL on both the backend using Lighthouse, and on the frontend using Vue Apollo. If you ever come across any services that use GraphQL, you should be familiar with the