91 thoughts to “Vue.js JWT Authentication with Vuex and Vue Router”

  1. Hi,

    thank you very much for uploading the source code! Could you also provide the “user.js” file in the models folder?

  2. Hey Bezkoder, nice Project and really helpfull.
    Would it be possible to upload the sourcecode to github? This would help to check some files directly without searching for it.
    Thank you very much!

  3. This is one of the best Vue.js tutorial for Authentication that combines many things inside: HTTP client, Vuex, JWT, Form validation.
    Thank you so much for your effort.

  4. Nice… But somehow I am not able to change model. Can you push your github repo with this part of fullstack project? I would like to compare it with my project.

  5. Hi bezkoder,
    thank you for your great tutorial, it was the best and cleanest I found about JWT Authentication.
    Really inspiring, truly! I based my new projects on your code 🙂
    I still found some little things that could be “fixed” or improved in your code, maybe I could send you some patch on github if you’re interested in it.

      1. Thank you so much. It looks great. I will take time to run and test your code next week. If everything runs, I will update this tutorial with your code.

        Once again, thank you so much for your help. 🙂

  6. Hello!
    Great Tutorial, thank u very much.
    I am facing this problem when trying to login: gives the error: { “error”: “Unauthorized” }. How can i fix that?

    1. Hi, how did you cause the issue? Did you run backend first? Also check database so that you can make sure registration is ok before logging in.

  7. Yes the backend is on a live server. The api are created on laravel. I’m doing only login because i should take the created users from backend to do the login. Maybe i should use the auth library websanova.

  8. Hi, thanks a lot for the tutorial. At signup, I get error:

    { “timestamp”: “2020-02-15T06:34:30.014+0000”, “status”: 500, “error”: “Internal Server Error”, “message”: “Error: Role is not found.”, “path”: “/api/auth/signup” }

    in the front end you are not passing role value as attribute for user

    1. Hi Faraz,

      This is a late reply but I thought I would try and answer it anyway.

      You shouldn’t send the user role to the API as this is a security risk. One can then send post to the registration API and manually set the role to admin which is bad.

      You should set the role on the API side.

  9. Ok the problem above got resolved through the 3 INSERT’s I have to do.

    I was wondering where in the front end is the authentification check on every page? Because the router.beforeEach function you have commented out, so where is the authentication happening?

    1. Hi, look at user.service.js, you can see we add { headers: authHeader() } for each request to authorized resource. authHeader() returns x-access-token header or Authorization header with JWT token.

  10. I am new to Vue / frontend in general. Your tutorials have been a fantastic resource to learn from. Keep up the good work!
    Typescript version would be nice too!

    1. Hi, you need to run one of the backend servers listed in the tutorial, then this frontend Vue App will work well 🙂

  11. Hello and thank you for this great tutorial.
    But i think persist your jwt in session or local storage seems to be a bad practice.
    HTML5 Web Storage is vulnerable to XSS, has a larger attack surface area, and can impact all application users on a successful attack.
    We should consider store our jwt in cookies for web applications because of the additional security they provide, and the simplicity of protecting against CSRF (which is the cookie method’s weakness).

  12. Hello thank you for this very good tutorial,

    Right now, only the resources are protected, but users can still visit the admin page. Is there a way to just unauthorized users from the page completely?

    Thank you

  13. Great and helpful tutorial!

    One question I had was you mentioned “Instead of using axios or AuthService directly, these Components should work with Vuex Store”

    Could you help me understand why this is the recommended design pattern? Or link to a resource that can?

    Thanks!

    1. Hi, let me explain the sentence briefly.

      – “using axios or AuthService directly”: call axios method for HTTP requests such as post/get or AuthService.auth() method…
      – “these Components should work with Vuex Store”: the store container holds your application state – think about it as single source of truth. We use Vuex because login state, or loggedin user information should be checked and accessed from almost components.

      You can read more details about the reason to use Vuex at the post:
      https://vuejsdevelopers.com/2017/05/15/vue-js-what-is-vuex/

  14. Thank you very much for this great tutorial!

    As I understood, we store the token and the role in the localStorage, then use these information to prevent user to access the admin page. However, if the user modifies this role in the localStorage, he can visit the admin page normally (of course, he cannot use any API calls because on the backend, we checked his roles again).

    Do you know if there is anyway to completely prevent user to access the admin page?

    Thank you in advance.

  15. Hi! You are amazing. Thank you so much! All tutorials are pure gold, no unnecessary junk, so much appreciated!

  16. Great series on jwt. One comment – I got a little held up on how the login action was being called. Specifically I was confused on the ‘auth/login’ string passed into the dispatch function (it initially looked like a route to me). Adding a comment about how namespacing is used here may be worth considering. Thank you, Jake

  17. Hi,

    I implemented the same code in a Nuxt app and it doesn’t seem to work. It throws many issues and one being localStroage is not defined.
    Please help!!!

  18. I love your content. Very helpful….
    Thank you, I appreciate you taking the time to cater for the development community

  19. Hi! Thank you very much for your tutorials, really helpful! I followed the tutorial but I can’t quite understand how do you sign-up as an admin or a moderator. Could you help me with an explanation? Thank you

  20. Hi! Thank you. It’s a great tutorial. I like the approache with services.
    How about to use “this.$store.getters.isLoggedIn” instead “this.$store.state.auth.status.loggedIn”?
    This authentication needs AccessToken + RefreshToken and verification them lifetime in App.vue -> Created hook using interceptors.

  21. Your tutorials are priceless!

    For some weird reason I cannot APIs like ‘/api/test/all’, ‘/api/auth/signin’ etc. work on my server.
    They work perfectly fine on my local machine. There are also other APIs which I build following your other tutorial and they work fine on the server.

    The kind of error I get is: “Cannot GET /api/test/all”.

    Any ideas why it doesn’t work?

    Thank you!

    1. I’ve solved it. I’ve just installed all the necessary packages that weren’t on the server and rebooted the server.

  22. Hello,
    thank you for this great tutorial,
    i wonder about all the «computed» values that looks if user is logged In.
    it looks to me that they should be method as a change in vuex store would not change the result of the computed value because the store is not a «reactive dependency» see doc here https://vuejs.org/v2/guide/computed.html#Computed-Caching-vs-Methods

    once i changed all these computed to methods, it all went well.

    Still i’m very surprised you get it wrong on something as trivial as that, so it bother me that i must be missing something important

  23. Hi bezkoder,
    thank you very much for the detailed tutorial!
    How did you create the flow chart of the requests and messages between Vue App and Backend under “Flow for User Registration and User Login”? Is there a specific tool you used or maybe at least a template to create this graphic? I want to create something like this for my application as well. Thank you for your help.
    Greetings from Vienna!

  24. Hey, about auth.module.js, why in the actions > login after then and catch , You return Promise.resolve and Promise.reject ?

    Best regards

  25. Bonjour

    Excellent tuto. bien compréhensible.
    Est il possible d’ajouter le téléchargeant d’un fichier image au formulaire d’inscription.

    Vraiment c’est un super tutorial.
    Merci

  26. Hello, excellent tutorial.
    Is there a way to put the Authorization headers in vue.config.js so as not to put it on every request. I tried importing auth-header in the vue.config.js but it gives me error.

    Thanks

  27. Wow, amazing Vue Auth tutorial!
    you made the work look easy. The overall look of your web site is excellent, as well as the content.

  28. Bless you kind sir!
    Realy appreciate all your hard work in providing such a super duper example with the souce code in it!
    Saved my skin!
    reading throught your tutorial I’ve came to understand more and better working with sequelize and vue js.

  29. Thanks for the awesome tutorial!
    I am busy integrating with my own app.
    Can you make a tutorial on how to integrate Google ReCaptcha with Spring boot and Vue?

  30. Thanks a lot for this tutorials it’s very clear and very helpful!
    You take time to show the structure project, it ‘s very professional

  31. Congratulations on the tutorial.
    I have frontend and backend on the same server, when I connect directly through the server everything works fine. when I connect from a remote machine the frontend opens but I get the following “Network Error”. How can I solve? Thank you.

  32. I want to have a different navbars base on different roles when the user prompt to login. May I ask if you have any idea about it? Thanks😊

  33. Thank you for this nice tutorial. It is possibile to set an expiration to the token? I would like that the client require to the user to login again after a while-

  34. Thanks a lot for this cool and helpful tutorial.

    I am trying to figure out one more thing: When the browser is ideal for quiet a while and after that I refresh my browser, it appears as the loggedIn function is still returning true (since in the localStorage there is still the user item), but the token has expired. When I now make a backend request, it of course fails, but without any action. How can I intercept that the token is invalid and redirect the user to the login page?

    Thank you!

Leave a Reply

Your email address will not be published. Required fields are marked *