Наконец понял как работает аутентификация
This commit is contained in:
parent
e0ad073e38
commit
6b7129f523
|
|
@ -39,6 +39,7 @@ public function register(Request $request)
|
|||
|
||||
return response()->json([
|
||||
'message' => 'Successfully created user!',
|
||||
'user' => $user,
|
||||
'accessToken'=> $token,
|
||||
],201);
|
||||
}
|
||||
|
|
@ -76,6 +77,7 @@ public function login(Request $request)
|
|||
|
||||
return response()->json([
|
||||
'accessToken' =>$token,
|
||||
'user' => $user,
|
||||
'token_type' => 'Bearer',
|
||||
]);
|
||||
}
|
||||
|
|
|
|||
|
|
@ -7,22 +7,25 @@ import * as components from 'vuetify/components'
|
|||
import * as directives from 'vuetify/directives'
|
||||
import '@mdi/font/css/materialdesignicons.css'
|
||||
import { createMemoryHistory, createRouter } from 'vue-router'
|
||||
import {createPinia} from "pinia";
|
||||
|
||||
const vuetify = createVuetify({
|
||||
components,
|
||||
directives
|
||||
})
|
||||
|
||||
import AuthButtons from './views/AuthButtons.vue'
|
||||
import AuthButtons from './views/Auth/AuthButtons.vue'
|
||||
import Login from './views/Auth/Login.vue'
|
||||
import Registration from './views/Auth/Registration.vue'
|
||||
import Welcome from './views/Welcome.vue'
|
||||
import Wishlist from "./views/Wishlist/Wishlist.vue";
|
||||
|
||||
const routes = [
|
||||
{ path: '/', component: Welcome },
|
||||
{ path: '/auth_options', component: AuthButtons },
|
||||
{ path: '/login', component: Login },
|
||||
{ path: '/registration', component: Registration },
|
||||
{ path: '/wishlist', component: Wishlist },
|
||||
]
|
||||
|
||||
const router = createRouter({
|
||||
|
|
@ -30,4 +33,6 @@ const router = createRouter({
|
|||
routes,
|
||||
})
|
||||
|
||||
createApp(App).use(vuetify).use(router).mount("#app")
|
||||
const pinia = createPinia()
|
||||
|
||||
createApp(App).use(vuetify).use(router).use(pinia).mount("#app")
|
||||
|
|
|
|||
|
|
@ -1,14 +1,19 @@
|
|||
import { defineStore } from 'pinia'
|
||||
|
||||
export const useUserStore = defineStore('user', {
|
||||
state: () => {
|
||||
return { user: null }
|
||||
},
|
||||
state: () => ({
|
||||
user: null,
|
||||
token: localStorage.getItem('auth_token') || null,
|
||||
}),
|
||||
// could also be defined as
|
||||
// state: () => ({ count: 0 })
|
||||
actions: {
|
||||
increment() {
|
||||
this.count++
|
||||
setUser(user) {
|
||||
this.user = user;
|
||||
},
|
||||
setToken(token) {
|
||||
this.token = token;
|
||||
localStorage.setItem('auth_token', token);
|
||||
},
|
||||
},
|
||||
})
|
||||
|
|
|
|||
|
|
@ -5,7 +5,7 @@ export default {
|
|||
</script>
|
||||
|
||||
<template>
|
||||
<div class="d-flex flex-column justify-center align-center pa-3">
|
||||
<div class="d-flex flex-column justify-center align-center pa-3 w-33">
|
||||
<router-link to="/login" class="w-100 ma-2">
|
||||
<v-btn class="w-100">
|
||||
Вход
|
||||
|
|
@ -22,11 +22,16 @@ export default {
|
|||
'password': this.password,
|
||||
'remember_me': this.rememberMe
|
||||
}).then((res) => {
|
||||
console.log(res);
|
||||
this.$cookie.set("keyName", keyValue, "expiring time")
|
||||
this.userStore.setUser(res.data.user);
|
||||
this.userStore.setToken(res.data.accessToken);
|
||||
this.$router.push('/');
|
||||
}).catch((error)=>{
|
||||
this.errorMessage = error;
|
||||
if (!error.response){
|
||||
this.errorMessage = '';
|
||||
this.errorMessageContainerStyle = 'display: none;';
|
||||
return;
|
||||
}
|
||||
this.errorMessage = error.response.data.message;
|
||||
this.errorMessageContainerStyle = '';
|
||||
})
|
||||
}
|
||||
|
|
@ -35,7 +40,7 @@ export default {
|
|||
</script>
|
||||
|
||||
<template>
|
||||
<div class="d-flex flex-column justify-center align-center">
|
||||
<div class="d-flex flex-column justify-center align-center w-33">
|
||||
<v-text-field class="w-100"
|
||||
v-model="email"
|
||||
label="E-mail"
|
||||
|
|
|
|||
|
|
@ -1,9 +1,11 @@
|
|||
<script>
|
||||
import axios from "axios";
|
||||
import {useUserStore} from "../../store/user.js";
|
||||
|
||||
export default {
|
||||
name: "Registration",
|
||||
data: () => ({
|
||||
userStore: useUserStore(),
|
||||
valid: false,
|
||||
login: '',
|
||||
email: '',
|
||||
|
|
@ -21,7 +23,8 @@ export default {
|
|||
'password': this.password,
|
||||
'c_password': this.repeatPassword
|
||||
}).then((res) => {
|
||||
console.log(res);
|
||||
this.userStore.setUser(res.data.user);
|
||||
this.userStore.setToken(res.data.accessToken);
|
||||
this.$router.push('/');
|
||||
}).catch((error)=>{
|
||||
this.errorMessage = error;
|
||||
|
|
@ -33,7 +36,7 @@ export default {
|
|||
</script>
|
||||
|
||||
<template>
|
||||
<div class="d-flex flex-column justify-center align-center">
|
||||
<div class="d-flex flex-column justify-center align-center w-33">
|
||||
<v-text-field class="w-100"
|
||||
v-model="login"
|
||||
label="Логин"
|
||||
|
|
|
|||
|
|
@ -1,9 +1,17 @@
|
|||
<template>
|
||||
<v-card class="bg-gradient" style="height: 100%">
|
||||
<v-card-text class="d-flex justify-center align-center">
|
||||
<v-card class="align-center justify-center h-auto w-33 card-bg">
|
||||
<v-card-title>Добро пожаловать в <router-link to="/auth_options" class="link-no-decor">Wishlist</router-link>!</v-card-title>
|
||||
<v-card-text>
|
||||
<v-card class="align-center justify-center h-auto w-66 card-bg">
|
||||
<v-card-title class="d-flex justify-space-between">
|
||||
<div>
|
||||
<span>Добро пожаловать в </span>
|
||||
<span><router-link :to="isAuthenticated ? '/wishlist' : '/auth_options'" class="link-no-decor">Wishlist</router-link>, </span>
|
||||
<span v-if="isAuthenticated">{{ this.user['name'] }}!</span>
|
||||
<span v-else>Гость!</span>
|
||||
</div>
|
||||
<span v-if="isAuthenticated" class="link-no-decor align-end" @click="logout">Выйти</span>
|
||||
</v-card-title>
|
||||
<v-card-text class="d-flex justify-center align-center">
|
||||
<router-view/>
|
||||
</v-card-text>
|
||||
</v-card>
|
||||
|
|
@ -13,19 +21,76 @@
|
|||
|
||||
<script>
|
||||
import axios from "axios";
|
||||
import {useUserStore} from "../store/user.js";
|
||||
import {watch} from "vue";
|
||||
export default {
|
||||
name: "Welcome",
|
||||
data: () => ({
|
||||
cardTitle: 'Hello world!',
|
||||
isAuthenticated: false,
|
||||
username: ''
|
||||
}),
|
||||
computed: {
|
||||
user() {
|
||||
const authStore = useUserStore();
|
||||
return authStore.user;
|
||||
},
|
||||
},
|
||||
methods: {
|
||||
async logout() {
|
||||
try {
|
||||
const authStore = useUserStore();
|
||||
let token = authStore.token;
|
||||
await axios.get('/api/auth/logout',
|
||||
{
|
||||
headers:
|
||||
{
|
||||
Authorization: `Bearer ${token}`,
|
||||
token: token
|
||||
}
|
||||
}
|
||||
);
|
||||
authStore.setUser(null);
|
||||
authStore.setToken(null);
|
||||
this.$router.push('/auth_options');
|
||||
} catch (error) {
|
||||
alert('Ошибка выхода');
|
||||
}
|
||||
},
|
||||
checkUser(){
|
||||
const authStore = useUserStore();
|
||||
let token = authStore.token;
|
||||
if (token){
|
||||
axios.get(
|
||||
'/api/auth/user',
|
||||
{
|
||||
headers:
|
||||
{
|
||||
Authorization: `Bearer ${token}`,
|
||||
token: token
|
||||
}
|
||||
}
|
||||
).then((res) => {
|
||||
authStore.setUser(res.data);
|
||||
}).catch((error)=>{
|
||||
authStore.setUser(null);
|
||||
authStore.setToken(null);
|
||||
})
|
||||
}
|
||||
},
|
||||
},
|
||||
mounted() {
|
||||
this.$router.push('/auth_options');
|
||||
axios.get(
|
||||
'/api/auth/user'
|
||||
).then((res) => {
|
||||
console.log(res);
|
||||
})
|
||||
const authStore = useUserStore();
|
||||
watch(authStore, (newStore, oldStore)=>{
|
||||
this.isAuthenticated = newStore.user !== null && newStore.user !== undefined;
|
||||
if (this.isAuthenticated) {
|
||||
this.$router.push('/wishlist');
|
||||
} else {
|
||||
this.$router.push('/auth_options');
|
||||
}
|
||||
});
|
||||
this.checkUser();
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
|
|
|||
|
|
@ -0,0 +1,13 @@
|
|||
<script>
|
||||
export default {
|
||||
name: "Wishlist"
|
||||
}
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<v-label>Hello world!</v-label>
|
||||
</template>
|
||||
|
||||
<style scoped>
|
||||
|
||||
</style>
|
||||
Loading…
Reference in New Issue