logowanie Vue, Vuex, JWT

Question

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ć

Answer 1

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.

Comments

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ąć :/

---

w miejscu w którym definiujesz baseURL dla axiosa, dodaj równieź interceptor, W interceptore -> config headers common ['nazwa-headera-dla-klucza'] =  window.localStorage...

---

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);
});

 

---

Mniej więcej. Jeśli nie działa, sprawdź w networku, co się wysyła

---

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ć?

---

@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
}