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