How do i use this with vue

[patrickoramah]

Can you please make a vue demo

[zachfeldman]

@patrickoramah would you like to take a stab at contributing one, and post any issues you have here? I think it's a great idea to add Vue implementation instructions, but this is a volunteer-run project.

[nicholasshirley]

Hey @patrickoramah I was able to get this to work by using the docs here and adding this to your main.js file (assuming you are using the vue cli generator and add axios). I haven't tested it extensively, but it's working so far.

// The Vue build version to load with the `import` command
// (runtime-only or standalone) has been set in webpack.base.conf with an alias.
import Vue from 'vue';
import axios from 'axios';
import App from './App';
import router from './router';

Vue.config.productionTip = false;

/* eslint-disable no-new */
new Vue({
  el: '#app',
  router,
  template: '<App/>',
  components: { App },

  created() {
    axios.interceptors.request.use((config) => {
      config.headers.client = window.localStorage.getItem('client');
      config.headers['access-token'] = window.localStorage.getItem('access-token');
      config.headers.uid = window.localStorage.getItem('uid');
      config.headers['token-type'] = window.localStorage.getItem('token-type');

      return config;
    });

    axios.interceptors.response.use((response) => {
      // Set user headers only if they are not blank.
      // If DTA gets a lot of request quickly, it won't return headers for some requests
      // so you need a way to keep headers in localStorage to gettting set to undefined
      if (response.headers.client) {
        localStorage.setItem('access-token', response.headers['access-token']);
        localStorage.setItem('client', response.headers.client);
        localStorage.setItem('uid', response.headers.uid);
        localStorage.setItem('token-type', response.headers['token-type']);
      }
      // You have to return the response here or you won't have access to it
      // later
      return response;
    });
  },
});

@zachfeldman I'd like to take stab at this. What would be most useful? Something like a text walkthrough or clonable repo? I'm still really new at Vue so I doubt it would be perfect, but maybe it would save someone some time.

[zachfeldman]

@nicholasshirley this is very exciting!

It would be REALLY COOL if we could get a clonable repo that's an implementation of Devise Token Auth for Vue users. We can definitely add this to the docs here too as another implementation when that's said and done.

Totally cool if it's not perfect but a workable start would be great. Would love to wrap our hands around the Vue community as well.

[nicholasshirley]

Hey @zachfeldman I pushed up a test repo with this. There's still some more to do, but I'm hitting some errors (#1002) that I'd like to try to resolve before adding the rest of the items on the to-do list.

[zachfeldman]

Awesome! Let's try to get through #1002 ....

[nicholasshirley]

Ok, the sample hits all the routes except for forgot password and there's an issue with logging out (axios doesn't pass headers on delete).

Before I finish the forgot password flow, I have a bit of a theoretical question and a practical one. In the past when I have used devise_token_auth with React, I overrode the passwords controller (and registrations controller) to get rid of the redirect logic. When the API is separate from the front end, I don't like sending the user to a different URL (though I guess I could send them to the front end, have axios make a GET request behind the scenes with a redirect url that goes nowhere, but I haven't tried that). What is the logic behind a token auth system taking redirect links? Are most people using them or have they done something similar with their controllers?

As a practical question, is it a better demonstration to figure out some way to deploy with Vue that keeps all the controllers stock or should I assume that most people will want to handle everything through Vue Router and override the redirects?

[zachfeldman]

I've overridden a lot of the default controllers with my React application so I don't think that it's too bad to do that :). Yeah I agree redirects aren't an awesome solution for an API-based solution like this....

[saurabhbhatia]

I've got the following working with vue -

• Signup
• Login
• confirmation emails
• Route guards & token verification
• Forgot password
• reset password
• invitable, and invitations.

Thanks @nicholasshirley for the pointers, I used your repo to start with. My setup was slightly more challenging, as we don't use action mailer for email templates. We use VeroApp for managing email templates and email delivery. I will create a demo and write 1 or more blog posts when i have more time. 😄 . I'm using vue2, vuex , Rails 5.2 and devise_token_auth bundled from master.

[daviddewinter]

@saurabhbhatia eagerly waiting for a demo and blog post, as I am currently in the exact same spot considering a transition to devise token auth with a rails backend and starting out with vue2 + vuex to move to a rails api only setup :) I'd be happy to try and contribute as well where I can

[gabrielsclimaco]

For people still having struggle with using devise token auth with Vue, this lib helps a lot: https://github.com/websanova/vue-auth

[gabrielsclimaco]

Would a example project on README be a good PR?

[sebmor]

+1 for a Vue example

[GMolini]

Hi @gabrielsclimaco do you have a demo using vue-auth? I cant get it to work