• Najnowsze pytania
  • Bez odpowiedzi
  • Zadaj pytanie
  • Kategorie
  • Tagi
  • Zdobyte punkty
  • Ekipa ninja
  • IRC
  • FAQ
  • Regulamin
  • Książki warte uwagi

logowanie Vue, Vuex, JWT

VPS Starter Arubacloud
0 głosów
680 wizyt
pytanie zadane 8 lipca 2018 w JavaScript przez mi-20 Stary wyjadacz (13,190 p.)

Witam, jak dodać token do requestów?

Mam logowanie (Vue, Vuex, JWT), tak wygląda mój kod

const state = {
  logged: false
}
const getters = {
  logged: state => {
    return state.logged
  }
}
const actions = {
  login({commit}, credentials) {
    axios.post(`login`, credentials)
      .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
}

w back edndzie wygląda to tak

 public function login(Request $request)
  {
    $credentials = $request->only('email', 'password');
    if (!$token = JWTAuth::attempt($credentials)) {
      return response([
        'status' => 'error',
        'error' => 'invalid.credentials',
        'msg' => 'Invalid Credentials.'
      ], 400);
    }
    return response([
      'status' => 'success',
      'token' => $token
    ])->header('Authorization', $token);
  }

token jest zapisywany do localStorage jednak gdy chcę dodać dane, co wymaga zalogowania, zabezpiecza przed tym middlewara otrzymuję błąd

Failed to load resource: the server responded with a status of 401 (Unauthorized)

wydaje mi się, że token trzeba w jakiś sposób dodać do requestów jednak nie mam pojęcia jak i gdzie to zrobić

1 odpowiedź

0 głosów
odpowiedź 8 lipca 2018 przez niezalogowany

Możesz dodać token w interceptorze axiosa. W prosty sposób można tam również obsłużyć automatyczne wylogowywanie użytkownika, gdy response status równy jest 401. 

Swoją drogą, wartości ze store'a możesz pobierać bezpośrednio ze state'a - pisanie wszystkiego w getterach jest nadmiarowe. Gettery są jak computed dla vuexa.

Dobrze jest również zwracać Promise'a w actions (return axios...). Można dzięki temu łatwo rozszerzyć UI o loadery, a ich logikę realizować w scope'owanych komponentach.

komentarz 8 lipca 2018 przez mi-20 Stary wyjadacz (13,190 p.)

zakładając że mamy taki kod

const actions = {
  add({commit}, items) {
    axios.post(`create`, items)
      .then(() => commit('ADD'))
  }
}

i ma on za zadanie dodać rekord, jak należy dodać token w interceptorze? Jakoś nie mogę tego ogarnąć :/

komentarz 8 lipca 2018 przez niezalogowany
w miejscu w którym definiujesz baseURL dla axiosa, dodaj równieź interceptor, W interceptore -> config headers common ['nazwa-headera-dla-klucza'] =  window.localStorage...
komentarz 8 lipca 2018 przez mi-20 Stary wyjadacz (13,190 p.)

czy tak to powinno wyglądać?

axios.interceptors.request.use(function (config) {

  config.headers.common['Authorization'] = 'Bearer: ' + env.AUTH_TOKEN
  return config

}, function (error) {

  return Promise.reject(error);
});

 

komentarz 8 lipca 2018 przez niezalogowany
Mniej więcej. Jeśli nie działa, sprawdź w networku, co się wysyła
komentarz 9 lipca 2018 przez mi-20 Stary wyjadacz (13,190 p.)
a jak pobrać dane z tokena? głównie chodzi mi o ID użytkownika?

i jeszcze, czy token będzie się sam odświeżał czy trzeba to okodować?
komentarz 10 lipca 2018 przez mi-20 Stary wyjadacz (13,190 p.)

@niezalogowany, Swoją drogą, wartości ze store'a możesz pobierać bezpośrednio ze state'a - pisanie wszystkiego w getterach jest nadmiarowe. Gettery są jak computed dla vuexa.

Dobrze jest również zwracać Promise'a w actions (return axios...). Można dzięki temu łatwo rozszerzyć UI o loadery, a ich logikę realizować w scope'owanych komponentach.

możesz mi o tym coś więcej o tym powiedzieć? Może jakieś artykuły? W czym jest to lepsze od standardowego 

const state = {

}
const getters = {

}
const actions = {

}
const mutations = {

}
export default {
  state,
  getters,
  actions,
  mutations
}

 

Podobne pytania

0 głosów
1 odpowiedź 436 wizyt
pytanie zadane 30 czerwca 2018 w JavaScript przez mi-20 Stary wyjadacz (13,190 p.)
0 głosów
0 odpowiedzi 200 wizyt
pytanie zadane 1 lipca 2018 w JavaScript przez mi-20 Stary wyjadacz (13,190 p.)
0 głosów
0 odpowiedzi 198 wizyt
pytanie zadane 22 stycznia 2019 w PHP przez Ziito Obywatel (1,110 p.)

92,452 zapytań

141,262 odpowiedzi

319,080 komentarzy

61,854 pasjonatów

Motyw:

Akcja Pajacyk

Pajacyk od wielu lat dożywia dzieci. Pomóż klikając w zielony brzuszek na stronie. Dziękujemy! ♡

Oto polecana książka warta uwagi.
Pełną listę książek znajdziesz tutaj.

Akademia Sekuraka

Akademia Sekuraka 2024 zapewnia dostęp do minimum 15 szkoleń online z bezpieczeństwa IT oraz dostęp także do materiałów z edycji Sekurak Academy z roku 2023!

Przy zakupie możecie skorzystać z kodu: pasja-akademia - użyjcie go w koszyku, a uzyskacie rabat -30% na bilety w wersji "Standard"! Więcej informacji na temat akademii 2024 znajdziecie tutaj. Dziękujemy ekipie Sekuraka za taką fajną zniżkę dla wszystkich Pasjonatów!

Akademia Sekuraka

Niedawno wystartował dodruk tej świetnej, rozchwytywanej książki (około 940 stron). Mamy dla Was kod: pasja (wpiszcie go w koszyku), dzięki któremu otrzymujemy 10% zniżki - dziękujemy zaprzyjaźnionej ekipie Sekuraka za taki bonus dla Pasjonatów! Książka to pierwszy tom z serii o ITsec, który łagodnie wprowadzi w świat bezpieczeństwa IT każdą osobę - warto, polecamy!

...