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

Nie rozumiem niektórych linni kodu

42 Warsaw Coding Academy
0 głosów
149 wizyt
pytanie zadane 7 lipca 2020 w JavaScript przez Renzov Obywatel (1,220 p.)

Cześć,

Kupiłem templatkę vuejs ale niestety nie rozumiem modułu logowania. Niektóre sekcje chyba rozumiem a niektóre w ogóle. Byłbym bardzo wdzięczny, jeśli ktoś mógłby sprawdzić, czy dobrze interpretuję kod.

Mam kod mock.service.js

I tutaj pytanie. Czy ten kod ma w ogóle jakieś znaczenie czy jest tylko dany "statycznie" na potrzeby logowania dema (W sensie, żeby nie łączyć się z bazą danych)? Czy jednak nawet przy zrobienie logowania na backendzie będzie on wymagany?

import Vue from "vue";

var MockAdapter = require("axios-mock-adapter");

// mock testing user accounts
const users = [
  {
    email: "admin@demo.com",
    password: "demo",
    token: "mgfi5juf74j"
  },
  {
    email: "admin2@demo.com",
    password: "demo",
    token: "fgj8fjdfk43"
  }
];

const MockService = {
  init() {
    // this sets the mock adapter on the default instance
    var mock = new MockAdapter(Vue.axios);

    // mock login request
    mock.onPost("/login").reply(data => {
      const credential = JSON.parse(data.data);
      const found = users.find(user => {
        return (
          credential.email === user.email &&
          credential.password === user.password
        );
      });
      if (found) {
        return [200, found];
      }
      return [404, { errors: ["The login detail is incorrect"] }];
    });

    // mock to verify authentication
    mock.onGet(/\/verify\/?/).reply(data => {
      const token = data.headers.Authorization.replace("Token ", "");
      if (token !== "undefined") {
        const found = users.find(user => {
          return token === user.token;
        });
        return [200, found];
      }
      return [401, { errors: ["Invalid authentication"] }];
    });
  }
};

export default MockService;

Kolejny kod to ten od Auth.module.js

import ApiService from "@/core/services/api.service";
import JwtService from "@/core/services/jwt.service";

// action types
export const VERIFY_AUTH = "verifyAuth";
export const LOGIN = "login";
export const LOGOUT = "logout";
export const REGISTER = "register";
export const UPDATE_USER = "updateUser";

// mutation types
export const PURGE_AUTH = "logOut";
export const SET_AUTH = "setUser";
export const SET_ERROR = "setError";

const state = {
  errors: null,
  user: {},
  isAuthenticated: !!JwtService.getToken()
};

const getters = {
  currentUser(state) {
    return state.user;
  },
  isAuthenticated(state) {
    return state.isAuthenticated;
  }
};

const actions = {
  [LOGIN](context, credentials) {
    return new Promise(resolve => {
      ApiService.post("login", credentials)
        .then(({ data }) => {
          context.commit(SET_AUTH, data);
          resolve(data);
        })
        .catch(({ response }) => {
          context.commit(SET_ERROR, response.data.errors);
        });
    });
  },
  [LOGOUT](context) {
    context.commit(PURGE_AUTH);
  },
  [REGISTER](context, credentials) {
    return new Promise((resolve, reject) => {
      ApiService.post("users", { user: credentials })
        .then(({ data }) => {
          context.commit(SET_AUTH, data);
          resolve(data);
        })
        .catch(({ response }) => {
          context.commit(SET_ERROR, response.data.errors);
          reject(response);
        });
    });
  },
  [VERIFY_AUTH](context) {
    if (JwtService.getToken()) {
      ApiService.setHeader();
      ApiService.get("verify")
        .then(({ data }) => {
          context.commit(SET_AUTH, data);
        })
        .catch(({ response }) => {
          context.commit(SET_ERROR, response.data.errors);
        });
    } else {
      context.commit(PURGE_AUTH);
    }
  },
  [UPDATE_USER](context, payload) {
    const { email, username, password, image, bio } = payload;
    const user = { email, username, bio, image };
    if (password) {
      user.password = password;
    }

    return ApiService.put("user", user).then(({ data }) => {
      context.commit(SET_AUTH, data);
      return data;
    });
  }
};

const mutations = {
  [SET_ERROR](state, error) {
    state.errors = error;
  },
  [SET_AUTH](state, user) {
    state.isAuthenticated = true;
    state.user = user;
    state.errors = {};
    JwtService.saveToken(state.user.token);
  },
  [PURGE_AUTH](state) {
    state.isAuthenticated = false;
    state.user = {};
    state.errors = {};
    JwtService.destroyToken();
  }
};

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

Z tego co rozumiem, to ten plik odpowiada za logowania, rejestrację etc użytkownika?

Api.post mogę zastąpić np. axios.port które będzie wysyłać dane do backendu ?

Jakbyś ktoś mógł też wytłumaczyć blok "[VERIFY_AUTH](context)" ponieważ nie za bardzo rozumiem tego api.service

1 odpowiedź

–1 głos
odpowiedź 7 lipca 2020 przez eunstachy Stary wyjadacz (14,180 p.)
wybrane 5 sierpnia 2020 przez Renzov
 
Najlepsza

Czytałeś dokumentację mock? :) 

Ten pakiet służy to tworzenia sztucznych odpowiedzi z backendu. 

Jeśli chodzi o  "[VERIFY_AUTH](context)" to WYDAJĘ mi się, że służy do odświeżania JWT.

Podobne pytania

0 głosów
1 odpowiedź 369 wizyt
pytanie zadane 31 grudnia 2017 w C i C++ przez ciamciam Początkujący (350 p.)
0 głosów
1 odpowiedź 465 wizyt
0 głosów
2 odpowiedzi 424 wizyt
pytanie zadane 18 października 2015 w PHP przez Jakub Suszyński Użytkownik (540 p.)

93,377 zapytań

142,380 odpowiedzi

322,532 komentarzy

62,727 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

VMware Cloud PRO - przenieś swoją infrastrukturę IT do chmury
...