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

logowanie Vue, Vuex, JWT

0 głosów
276 wizyt
pytanie zadane 8 lipca 2018 w JavaScript, jQuery, AJAX przez mi-20 Stary wyjadacz (10,360 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 argeento Szeryf (97,240 p.)

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 (10,360 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 argeento Szeryf (97,240 p.)
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 (10,360 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 argeento Szeryf (97,240 p.)
Mniej więcej. Jeśli nie działa, sprawdź w networku, co się wysyła
komentarz 9 lipca 2018 przez mi-20 Stary wyjadacz (10,360 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 (10,360 p.)

@argeento, 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ź 240 wizyt
pytanie zadane 30 czerwca 2018 w JavaScript, jQuery, AJAX przez mi-20 Stary wyjadacz (10,360 p.)
0 głosów
0 odpowiedzi 115 wizyt
pytanie zadane 1 lipca 2018 w JavaScript, jQuery, AJAX przez mi-20 Stary wyjadacz (10,360 p.)
0 głosów
0 odpowiedzi 24 wizyt
pytanie zadane 22 stycznia w PHP, Symfony, Zend przez Ziito Użytkownik (830 p.)
Porady nie od parady
Nie wiesz jak poprawnie zredagować pytanie lub pragniesz poznać którąś z funkcji forum? Odwiedź podstronę Pomoc (FAQ) dostępną w menu pod ikoną apteczki.FAQ

64,924 zapytań

111,392 odpowiedzi

234,426 komentarzy

46,754 pasjonatów

Przeglądających: 228
Pasjonatów: 13 Gości: 215

Motyw:

Akcja Pajacyk

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

Oto dwie polecane książki warte uwagi. Pełną listę znajdziesz tutaj.

...