Alexey Velikiy
3 years ago
12 changed files with 165 additions and 32 deletions
Before Width: | Height: | Size: 6.7 KiB After Width: | Height: | Size: 10 KiB |
@ -0,0 +1,35 @@ |
|||||||
|
import { User } from "@/types/user"; |
||||||
|
|
||||||
|
import axios from 'axios'; |
||||||
|
|
||||||
|
const API_URL = 'http://localhost:8080/api/auth/'; |
||||||
|
|
||||||
|
class AuthService { |
||||||
|
login(user: User) { |
||||||
|
return axios |
||||||
|
.post(API_URL + 'signin', { |
||||||
|
username: user.username, |
||||||
|
password: user.password |
||||||
|
}) |
||||||
|
.then((response: any) => { |
||||||
|
if (response.data.accessToken) { |
||||||
|
localStorage.setItem('user', JSON.stringify(response.data)); |
||||||
|
} |
||||||
|
return response.data; |
||||||
|
}); |
||||||
|
} |
||||||
|
|
||||||
|
logout() { |
||||||
|
localStorage.removeItem('user'); |
||||||
|
} |
||||||
|
|
||||||
|
register(user: User) { |
||||||
|
return axios.post(API_URL + 'signup', { |
||||||
|
username: user.username, |
||||||
|
email: user.email, |
||||||
|
password: user.password |
||||||
|
}); |
||||||
|
} |
||||||
|
} |
||||||
|
|
||||||
|
export default new AuthService(); |
@ -0,0 +1,10 @@ |
|||||||
|
export default function authHeader() { |
||||||
|
let user = JSON.parse(localStorage.getItem('user')!); |
||||||
|
|
||||||
|
if (user && user.accessToken) { |
||||||
|
return { Authorization: 'Bearer ' + user.accessToken }; |
||||||
|
} else { |
||||||
|
return {}; |
||||||
|
} |
||||||
|
} |
||||||
|
|
@ -0,0 +1,62 @@ |
|||||||
|
import AuthService from '@/services/auth.service'; |
||||||
|
import { User } from '@/types/user'; |
||||||
|
|
||||||
|
const user = JSON.parse(localStorage.getItem('user')!); |
||||||
|
const initialState = user |
||||||
|
? { status: { loggedIn: true }, user } |
||||||
|
: { status: { loggedIn: false }, user: null }; |
||||||
|
|
||||||
|
export const auth = { |
||||||
|
namespaced: true, |
||||||
|
state: initialState, |
||||||
|
actions: { |
||||||
|
login({ commit }, user: User) { |
||||||
|
return AuthService.login(user).then( |
||||||
|
user => { |
||||||
|
commit('loginSuccess', user); |
||||||
|
return Promise.resolve(user); |
||||||
|
}, |
||||||
|
error => { |
||||||
|
commit('loginFailure'); |
||||||
|
return Promise.reject(error); |
||||||
|
} |
||||||
|
); |
||||||
|
}, |
||||||
|
logout({ commit }) { |
||||||
|
AuthService.logout(); |
||||||
|
commit('logout'); |
||||||
|
}, |
||||||
|
register({ commit }, user) { |
||||||
|
return AuthService.register(user).then( |
||||||
|
response => { |
||||||
|
commit('registerSuccess'); |
||||||
|
return Promise.resolve(response.data); |
||||||
|
}, |
||||||
|
error => { |
||||||
|
commit('registerFailure'); |
||||||
|
return Promise.reject(error); |
||||||
|
} |
||||||
|
); |
||||||
|
} |
||||||
|
}, |
||||||
|
mutations: { |
||||||
|
loginSuccess(state, user) { |
||||||
|
state.status.loggedIn = true; |
||||||
|
state.user = user; |
||||||
|
}, |
||||||
|
loginFailure(state) { |
||||||
|
state.status.loggedIn = false; |
||||||
|
state.user = null; |
||||||
|
}, |
||||||
|
logout(state) { |
||||||
|
state.status.loggedIn = false; |
||||||
|
state.user = null; |
||||||
|
}, |
||||||
|
registerSuccess(state) { |
||||||
|
state.status.loggedIn = false; |
||||||
|
}, |
||||||
|
registerFailure(state) { |
||||||
|
state.status.loggedIn = false; |
||||||
|
} |
||||||
|
} |
||||||
|
}; |
@ -0,0 +1,5 @@ |
|||||||
|
export class User { |
||||||
|
public username?: String |
||||||
|
public email?: String |
||||||
|
public password?: String |
||||||
|
} |
@ -0,0 +1,27 @@ |
|||||||
|
<template> |
||||||
|
<div class="hello"> |
||||||
|
<div> |
||||||
|
Login: <input type="text" /> |
||||||
|
Password: <input type="password" /> |
||||||
|
<input type="submit" /> |
||||||
|
</div> |
||||||
|
</div> |
||||||
|
</template> |
||||||
|
|
||||||
|
<script lang="ts"> |
||||||
|
import { Options, Vue } from 'vue-class-component'; |
||||||
|
|
||||||
|
@Options({ |
||||||
|
props: { |
||||||
|
msg: String |
||||||
|
} |
||||||
|
}) |
||||||
|
|
||||||
|
export default class Login extends Vue { |
||||||
|
msg!: string |
||||||
|
} |
||||||
|
</script> |
||||||
|
|
||||||
|
<style scoped lang="scss"> |
||||||
|
|
||||||
|
</style> |
Loading…
Reference in new issue