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