title: Vue.js 2 Authentication JWT
body: <p>[ Post has been edited: see below for answer ]</p>
  
  <p>I am trying to make a Vue.js2 application using this boilerplate <a href="https://github.com/vuejs-templates/webpack" rel="nofollow noreferrer">https://github.com/vuejs-templates/webpack</a></p>
  
  <p>I am stuck on the Authentication process, using this library: <a href="https://github.com/websanova/vue-auth" rel="nofollow noreferrer">https://github.com/websanova/vue-auth</a> and attempting to use JWT as the authentication method. Never having rolled my own authentication before, I am slightly lost. </p>
  
  <p>Packages I have installed which may be relevant: <code>passport, passport-jwt, jsonwebtokens</code>, <code>passport-local, passport-local-mongoose</code></p>
  
  <p>Looking at my logs I get a successful login response, but then it attempts to get <code>/auth/user</code> and responds with a 401 (unauthorized error). Perusing the auth library code, a GET req to <code>/auth/user</code> seems to be the expected behavior.</p>
  
  <p>Here is the login code (client side):</p>
  
  <pre><code>methods: {
    login() {
      this.$auth.login({
        body: this.data.body
        success(res) {
          console.log('Success: '+this.context);
          this.localStorage.setItem('auth-token', res.body.token);
        },
        error(res) {
          console.log("Error: " + this.context);
          this.error = res.data;
        },
        rememberMe: true,
        fetchUser: true
      });
    }
  }
  </code></pre>
  
  <p>And here is the appropriate code server-side: </p>
  
  <ul>
  <li>Removed Link | See Edits Section *</li>
  </ul>
  
  <p>What I am sure of is this:
  the server does in fact create a JWT which is valid (checked on jwt.io) during the login request. It does not appear to be set anywhere afterwards. It just sits there and then dies. There are mentions of an <code>Authorization Bearer</code> header in the response, which I am certain is not being set. Nor do I understand where or how to do this. There is no token set in localStorage after the login request. I'm not sure if this should exist, but think it likely that it should. In my console, searching local storage yields some strings and large integers, but no mention of a token in it.</p>
  
  <h1>Edits (8+ months later)</h1>
  
  <p>Gist to Solution here (slashes replaced by dashes in filenames):
  <a href="https://gist.github.com/wcarron27/b0db7a16df9ceff924d4a75050093c55" rel="nofollow noreferrer">https://gist.github.com/wcarron27/b0db7a16df9ceff924d4a75050093c55</a></p>
  
  <p>The reason my login method originally did not work was that the localStorage token was not set correctly, and thus failed to pass the getData method on the client-side redirect. vue-auth does this by default. By editing the url it hits in the vue-auth config, I was able to direct it to the proper route(BUT only after I properly set the localstorage token. Use <code>Vue.http.options.rootUrl</code> (or something, it's in the main.js file in the gist) to set the <code>Authorization</code> header.</p>
  
  <p>In the code, You must register vue-auth on the client side <code>main.js</code>, and call to it in the <code>Login.vue</code> "login" method. The client side config directs the http calls to the specified route in <code>main.js</code>. In the callback, the user and tokens are set in localStorage and the Vuex store.</p>
  
  <p>The Http reqs go the the API side and hit the route in <code>accounts.js.</code> That route uses a passport strategy defined in <code>./util/passport.js</code>, as well as a setJWT function defined in <code>./util/jwtLib.js</code>.</p>
  
  <p>After this, the client is redirected to a route of my choice, and data is populated by my store and ajax calls. Keep in mind, that while this should solve logins, i have not verified code correctness, as basically I would have needed to post the whole of two separate codebases.</p>
  
  <p>Additionally, this does not account for refresh errors. State is dropped on refresh, so do not rely on vuex for persistence. A combination of localStorage and vuex does the trick, though.</p>