A bugfix in case you can't logout: In Nav.vue the Logout router-link change it to this: Logout then in the logout function after you await the logout request you can redirect to login.
const logout = async () => { await fetch('localhost:8000/api/logout', { method: 'POST', headers: {'Content-Type': 'application/json'}, credentials: 'include', }); await store.dispatch('setAuth', false); //Add this line to redirect to login route await router.push('/login'); // It is important to put this line too, because if you don't put it, the NAV component will not recognize that it is no longer authenticated. } It will be good if you update your repository to solve this problem, for future students 👍👍👍👍👍
The common problem of all such tutorials is that they pay too much attention how to insert e.g. a button to the code but explain very little or don't explain at all principles of what we're doing. I assume as far as your auditory needs to know about an auth in Vue they already know basics about HTML and Vue so boring 80% of video can be shortened. Unfortunately I haven't learned how JWT works in Vue at all. What are auth cookies? What is difference with tokens? What about BFF? Router guards? Vuex? Nothing. It's just mechanical example.
Every video is available when you subscribe, also nice suggestion I will create a new page where I show what I'm currently working on and what I will work in the future.
at 18:36 when I click my submit button I get an 404 error in my console for localhost:8000/api/register how can I fix this issue? where I go to network and then preview there a message in the display area saying "Cannot POST /api/register"
@@87ruthless53 You can use Docker or you can build one of these backends: VueJS and Laravel JWT Authentication: ru-vid.com/group/PLlameCF3cMEs7ErSWENv03zOKtH5NTG61 VueJS and Django JWT Authentication: ru-vid.com/group/PLlameCF3cMEvj7fV-Szcaz_ve303e4AxX VueJS and NodeJS JWT Authentication: ru-vid.com/group/PLlameCF3cMEsjpIRxfB9Rjici3aMCaQVo VueJS and Golang JWT Authentication: ru-vid.com/group/PLlameCF3cMEvSY8iQ6QBVE8VRK4UiZZ33 VueJS and NestJS JWT Authentication: ru-vid.com/group/PLlameCF3cMEujfD19Si2VNRlFEyDa_ZJb VueJS and Deno JWT Authentication: ru-vid.com/group/PLlameCF3cMEuDSusZHXGeIZ0Axmd74aPc VueJS and C# JWT Authentication: ru-vid.com/group/PLlameCF3cMEti_wQrnx9lqlgpTGN9RcqZ VueJS and Kotlin JWT Authentication: ru-vid.com/group/PLlameCF3cMEvidqRQe5Ew65dbC_zN7__M
First of all thanks for this tutorial...for you are the only RU-vidr who stores jwt token with httponly cookie....I followed your tutorial step-by-step but when I logout, the jwt token doesnt get deleted from the browser (whereas from Postman, if I do a POST request to the 'logout' endpoint, the httponly cookie that contains the jwt token successfully gets deleted) ...but not sure why from the browser the jwt token doesnt get deleted while running the Vuejs app? I tried in both Firefox and chrome...same issue....can you please be able to throw some light on this?
I wrote a comment about the bugfix. In Nav.vue the Logout router-link change it to this: Logout then in the logout function after you await the logout request you can redirect to login.
@@anisbedhiafi4531 but I thought its not good to use localstorage. Now im so confused. Is his method really secure ?(provided that we add localstorage)
@@andrewaghoghovwia1948 Currently the available backends are in Laravel and in Django: VueJS and Laravel JWT Authentication: ru-vid.com/group/PLlameCF3cMEtiBwc_DJqvKpxUC2WbOCKl VueJS and Django JWT Authentication: ru-vid.com/group/PLlameCF3cMEv8Fcp3hA2rMG6sBZEh7VWX The other backends will be in NodeJS, NestJS, Golang, Deno.js and they will be uploaded in the following days
In Nav.vue --- Logout router-link, i changed to below Logout then in the logout function , added --------await router.push('/Login'); After I clicked on logout button also, i am able to redirect back to login page, But in navbar, still i can see Logout???? Can please tell me, why is this happening
update your "Logout" function to this one, just add two lines at the end of it const logout = async () => { await fetch('localhost:8000/api/logout', { method: 'POST', headers: {'Content-Type': 'application/json'}, credentials: 'include', }); await store.dispatch('setAuth', false); //Add this line to redirect to login route await router.push('/login'); // It is important to put this line too, because if you don't put it, the NAV component will not recognize that it is no longer authenticated. }
Logout doesn't seem to work for me. The cookie still remains. I'm using nodejs for backend and the API route works fine when I test in Postman. I've also changed the router-link for logout to the anchor tag.
You are right it doesn't work, the problem is in Nav.vue the Logout router-link change it to this: Logout it will work but it won't redirect. For some reason it redirects before it removes the cookie so I suggest adding a redirect at the logout function also.
Hello, this is a awesome guide. But I have an issue when setting cookie in browser. for postman it works fine, i am using axios with quasar framwork , I have set withCredential = True in axios boot file also. could you help me with it. thanks
Please provide a repo with the code. I keep missing small syntactical mistakes. Same for your other videos. You're the only page that doesn't provide the code.
