Skip to main content

VueJS JWT Auth with Rails APIs and LocalStorage Discussion

General • Asked by Chris Oliver
7a0701f73e80da8b466634f58a0dcb33

Great video, Chris!

I'm really enjoying the whole API series and I'm excited to see more Vue!

Thanks Chris!

Ce795239ba5dd2384fc2f88ffaff5451

Lots more Vue coming, I really really enjoy using it on the frontend. It feels refreshing to work with for once.

77c2287165badfe2c0df265cd9ccf94d

Great video, Chris!!! More videos VueJS!!! =)


29912acf4124f78d29de7a0f5adf89d0

Great job as always.
The only piece I missed actually was ES2015 syntax.
=)

Ce795239ba5dd2384fc2f88ffaff5451

One step at a time. ;-)


A9b0272075cde0fd2451507e0c2206dc

Thanks Chris, awesome video!


7a515c88e77c933cfc59ddc8ca139964

Why not hook into the new non-jQuery rails UJS driver for the submit handling?

Ce795239ba5dd2384fc2f88ffaff5451

Primarily because if you're already using a frontend framework you'll want to keep all the Javascript contained within the component. If you use the JS responses from UJS requests, you're not splitting your JS across two things (the component code and the rails response) and it's no longer self contained. The component should be the one changing state to keep it organized.

You can still do that if you want to, I just wouldn't recommend it because you might as well just use UJS only and no frontend framework then.


B852b5af066cd67806d2c0ddb3a2da54

Great idea to combine Rails Api + VueJs..
Can you give me an idea how to 'logout'?

Something like... localStorage.removeItem?
Thanks Chris

Ce795239ba5dd2384fc2f88ffaff5451

Logout is as simple as deleting the token from localStorage and the Vue state. Ideally, you'll want expirations on your tokens ideally so that they can be invalidated after a time. This is the same thing that Rails session cookies do for logout as well so it's nice and similar.

B852b5af066cd67806d2c0ddb3a2da54

Thanks for that fast replay...

I am just beginning with VueJs..
So I found this working for me..

<div id="locations">
<login v-if="token==null"></login>
<logout v-else=""></logout>
<temperature v-if="token!=null"></temperature>
</div>

<script type="text/x-template" id="logout-template">
<form>
<button v-on:click="submit">Logout</button>
</form>
</script>

Vue.component("logout",{
template: "#logout-template",

methods: {
submit: function(event){
localStorage.removeItem('token');
}
}
});


Acba3e7061eb78229a212161054be04b

Are you planning to do any react front end sessions? I know you're tired of authentication, but I'd love to see you do some work in react so that I can get a feel for how to use it with rails in the back end. I'm getting a lot out of this series. Something is preventing me from commenting on episode 6, but I'd love to learn more about AMS too


Da2211a10e4cd7e3f13ff96da4fbf115

An other way to prevent default when clicking on the submit button is: <button v-on:click.prevent="submit" [...]="" this="" takes="" benefit="" from="" some="" of="" vue="" features="">


Bbf51a5fafa183ea0b9a7eae488f955c

Definitely a little late for this, but how are routes handled? Vue (or Vuex) would handle them I suppose, right?

For example: I login, get redirected to a given page. I think that'd be Vuex, but I read that (for some reason) Rails should provide matching routes. I haven't found enough implementations on Rails APIs with Vue to be certain though.

Ce795239ba5dd2384fc2f88ffaff5451

All the routes are handled by Rails in these videos. Vue is just pointing to the Rails routes to submit things to the server.


0fa8b2ff66894cf6c9eb4e8f98f30c8b

Hello Chris. Isn't it a bad idea to store session tokens in localStorage, security-wise? They become vulnerable to XSS. Probably a secure cookie with httpOnly it's better.
https://medium.com/@yuliaoletskaya/can-jwt-be-used-for-sessions-4164d124fe23

Ce795239ba5dd2384fc2f88ffaff5451

Yeah, and I recommend using cookie auth for in-browser API authentication. You might as well take full advantage of the browser's security if you've got it.


9ac655038769c0a3616d3551a150e4ca

chris, I need your help about actioncable and redis.
I signedup here to talk with you.
I read your good post on actioncable.
I am sorry to bother you.
How can I send you my scripts to check out.
I hired one to make website.
But it does not load realtime data.
I think actioncable websocket is not working.
Can you help me ?
my email is [email protected].
thank you


Login or Create An Account to join the conversation.

Subscribe to the newsletter

Join 18,000+ developers who get early access to new screencasts, articles, guides, updates, and more.

By clicking this button, you agree to the GoRails Terms of Service and Privacy Policy.

More of a social being? We're also on Twitter and YouTube.