Vue.js dodawanie tokenu do requestów

0

Jeśli po zalogowaniu token jest zapisywany do localStorage to w jaki sposób można pobrać później z niego dane aktualnie zalogowanego usera (token JWT) oraz jak później dodawać go do requestów? Plik logowania.

const state = {
  logged: false
}
const getters = {
  logged: state => {
    return state.logged
  }
}
const actions = {
  login({commit}, credential) {
    axios.post('login', credential)
      .then(result => {
        //alert(result.data.token)
        localStorage.setItem('token', result.data.token)
        commit('LOGGED')
      })
  }
}
const mutations = {
  LOGGED(state) {
    state.logged = true
  }
}
export default {
  state,
  getters,
  actions,
  mutations
}

0

Ogolnie rzecz biorac mozesz uzyc jakiejs biblioteki do dekodowania/walidacji jwt i tyle a jak nie ja robie to tak:

export function getJwtPayload(jwt) {
  if(jwt === null || typeof jwt !== "string") {
    return null;
  }
  let base64Url = jwt.split('.')[1]
  let base64 = base64Url.replace('-', '+').replace('_', '/')
  return JSON.parse(window.atob(base64))
}

Caly token dodaje do kazdego requestu jako Authorization: Bearer token, jesli uzywac axios po prostu ustawiasz w request interceptor ten naglowek cos takiego:

axios.interceptors.request.use(function (config) {
  let token = Vue.localStorage.get('jwt-token', null);
  if(token) {
    config.headers['Authorization'] = 'Bearer ' + token;
  }
  return config;
}, function (error) {
  return Promise.reject(error);
});
0

z tego co wiem do weryfikacji można użyć np jsonwebtoken, prawda?
kiedy robię coś takiego

import jwt from 'jsonwebtoken'
const state = {
  logged: false
}
const getters = {
  logged: state => {
    return state.logged
  }
}
const actions = {
  login({commit}, credential) {
    axios.post('login', credential)
      .then(result => {
        //alert(result.data.token)
        jwt.verify(result.data.token, error => {
          if(!error) {
            localStorage.setItem('token', result.data.token)
            commit('LOGGED')
          }
        })
      })
  }
}
const mutations = {
  LOGGED(state) {
    state.logged = true
  }
}
export default {
  state,
  getters,
  actions,
  mutations
}

logowanie nie przebiega pomyślnie, wgl nie przebiega, token nie zostaje zapisany do localStorage, a konsola zwraca taki bład:

Uncaught (in promise) JsonWebTokenError {name: "JsonWebTokenError", message: "verify must be called asynchronous if secret or public key is provided as a callback", stack: "JsonWebTokenError: verify must be called asynchron…ernal:///./src/store/modules/auth/login.js:18:60)"}
0

@marcio:
dzięki za info jak dodawać token do requestów, świetnie działa. Nie rozumiem jednak tego kawałka jeśli chodzi o dekodowanie. Jak on działa, gdzie go umieścić i skąd weźmie sobie przechowywany token?

export function getJwtPayload(jwt) {
  if(jwt === null || typeof jwt !== "string") {
    return null;
  }
  let base64Url = jwt.split('.')[1]
  let base64 = base64Url.replace('-', '+').replace('_', '/')
  return JSON.parse(window.atob(base64))
}

1 użytkowników online, w tym zalogowanych: 0, gości: 1