Vue Frontend, Vuex, Laravel Backend

[PEASANT KING]

Guten Morgen,

ich stehe mal wieder auf dem Schlauch. Ich bin dabei meine Web Anwendung von rein Laravel Frontend und Backend auf Vue Frontend und Laravel Backend um zu programmieren soweit so gut.

Mittels Axios stelle ich Requests an meine Laravel API das funktioniert auch wunderbar. Beim Login speichere ich mittels Vuex den JWT Token z.B. und möchte auch die Daten des eingeloggten Users speichern.

Hier mal ein Code Ausschnitt aus meiner index.js für Vuex:

state: {

    isHidden: "",
    status: "",
    token: localStorage.getItem("token") || "",
    user: {}
  },

  mutations: {
    auth_request(state) {
      state.status = "loading";
    },
    auth_success(state, token, user) {
      state.status = "success";
      state.token = token;
      state.user = user;
    },

    auth_error(state) {
      state.status = "error";
    },

    logout(state) {
      state.status = "";
      state.token = "";
      state.user = {};
    }

  },

actions: {
login({ commit }, user) {
      return new Promise((resolve, reject) => {
        commit("auth_request");
        axios({
          url: "http://airbaseapi.local/api/login",
          data: user,
          method: "POST"
        })
          .then(response => {
            const token = response.data.success.token;
            const user = JSON.parse(response.data.success.user);

            localStorage.setItem("token", token);
            axios.defaults.headers.common["Authorization"] = "Bearer " + token;
            commit("auth_success", token, user);
            resolve(response);

          })

          .catch(error => {
            commit("auth_error");
            localStorage.removeItem("token");
            reject(error);

          });

      });

    },

}

Das Einloggen funktioniert auch wunderbar, leider ist aber mein User Objekt leer. Ich sitze auf dem Schlauch, da ich wenn ich das Objekt in der Console ausgebe, ein Objekt mit meinen Daten habe....

Der Code für die API sieht so aus:

     **
     * API login method
     *
     * @return json
     */
    public function login()
    {
        if (Auth::attempt(['email' => request('email'), 'password' => request('password')])) {

            $user = Auth::user();

            $success['token'] = $user->createToken('AirbaseAPI')->accessToken;
            $success['user'] = $user->toJson();

            return response()->json(
                [
                    'success' => $success,
                    $this->successStatus
                ]
            );
        } else {

            return response()->json(['error' => 'Unauthorized'], 401);
        }
    }

Im Browser sieht das Ganze so aus:

Wie man sieht habe ich im ersten Bild meine User Daten.

EDIT:

Ich habe das ganze mal temporär so gelöst, das ich mir eine weitere Mutation angelegt habe, die das User Objekt setzt, dann funktioniert es.

Vielleicht kann einer der Experten mir sagen, ob das gangbar ist, oder nicht die beste Art.

 

[Joshinator]

Ich zwar kein Plan von Laravel, aber dieser Vuex-Part scheint das Problem zu sein:
auth_success(state, token, user)

Die Parameter für eine Mutation sind state & payload, state behandelst du ja schon richtig aber du kannst an eine Mutation keinen 3ten Paramter übergeben. Deshalb wird das Token gesetzt aber der User nicht.
Wenn du ein Objekt an deine Mutation durchschleifen willst musst deine Payload einfach ein Objekt sein.
Siehe Vuex Docs https://vuex.vuejs.org/guide/mutations.html

In der Action rufst du das ganze dann so auf
commit("auth_success", { token, user });
Und in der Mutation sieht das dann so aus:
auth_success(state, payload) { state.status = "success"; state.token = payload.token; state.user = payload.user; },

 

[PEASANT KING]

Jo ich hab da wohl etwas den Wald vor lauter Bäumen nicht gesehen ...