Skip to main content

Subscribe to GoRails to get access to this episode and all other pro episodes, and new awesome content every month.

Subscribe Now
Only $19/month

Unlimited access. Cancel anytime.

30 VueJS JWT Auth with Rails APIs and LocalStorage

Episode 169 · January 24, 2017

Build a basic VueJS frontend application that authenticates to the server using JWT, Rails API, and LocalStorage

Authentication APIs Javascript VueJS


Transcripts

Subscribe or login to view the transcript for this episode.

Discussion


Gravatar
Nick McNeany (6,730 XP) on

Great video, Chris!

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

Thanks Chris!

Gravatar
Chris Oliver (159,840 XP) on

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

Gravatar
Nikola Okonesh (210 XP) on

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


Gravatar
amalrik maia (240 XP) on

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

Gravatar
Chris Oliver (159,840 XP) on

One step at a time. ;-)


Gravatar
Mike Parton (10 XP) on

Thanks Chris, awesome video!


Gravatar
inopinatus (880 XP) on

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

Gravatar
Chris Oliver (159,840 XP) on

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.


Gravatar
Werner Laude (550 XP) on

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

Something like... localStorage.removeItem?
Thanks Chris

Gravatar
Chris Oliver (159,840 XP) on

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.

Gravatar
Werner Laude (550 XP) on

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');
}
}
});


Gravatar
Melanie (1,520 XP) on

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


Gravatar
spaquet on

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="">


Gravatar
Ryan Maas on

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.

Gravatar
Chris Oliver (159,840 XP) on

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


Login or create an account to join the conversation.