Ciao a tutti,
Per lavoro sto sviluppando un'applicazione web Laravel per fornire un meccanismo di autenticazione centralizzato.
In pratica l'applicazione Laravel utilizza l'autenticazione Sanctum e espone delle API, che come da titolo, chiamo via frontend mediante VueJS.
Nell'applicazione Vue ho fino ad ora configurato il routing dell'applicazione ( /login, /apps ), dove /apps può essere visitata solo se l'utente è loggato.
Premetto che è la prima volta che utilizzo VueJs
Ricevuta quindi la response con il token di autenticazione e il messaggio di login avvenuto correttamente, come posso mantenere lo stato dell'utente loggato?
codice: LoginPage.vue
codice:
<template>
<divclass="hello">
<h1style="font-size: 28px">{{ msg }}</h1>
<p>
Compila il form sottostante con le tue credenziali per effettuare il login
</p>
<div>
<formclass="login-form"@submit.prevent="doLogin">
<divclass="form-field">
<inputtype="text"placeholder="email"v-model="user.email" />
</div>
<divclass="form-field">
<input type="password" placeholder="password" v-model="user.password"/>
</div>
<divclass="form-action">
<buttonclass="login-btn"type="submit">Submit</button>
</div>
</form>
<spanv-if="loading&&!show">Loading...</span>
<divv-else-if="show">
<p>Login success: {{ successMessage }}</p>
<p>Token: {{ token }}</p>
</div>
</div>
<p>oppure accedi con la tua identità digitale SPID</p>
<div>TODO - SPID BUTTON HERE</div>
</div>
</template>
<script>
export default {
name: "LoginPage",
props: {
msg: String,
},
data() {
return {
user: {
email: '',
password: ''
},
show: false,
loading: false,
successMessage: '',
token: ''
}
},
methods: {
async postData(url = '', data = {}) {
const response = await fetch(url, {
method: 'POST', // *GET, POST, PUT, DELETE, etc.
headers: {
'Content-Type': 'application/json'
},
body: JSON.stringify(data)
});
return response.json(); // parses JSON response into native JavaScript objects
},
doLogin() {
this.loading = true
this.postData('http://localhost:8000/api/login', this.user)
.then(data => {
this.token = data['data'].token;
this.successMessage = 'Login avvenuto correttamente';
this.loading = false;
this.show = true;
});
}
}
};
</script>
<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
h3 {
margin: 40px00;
}
ul {
list-style-type: none;
padding: 0;
}
li {
display: inline-block;
margin: 010px;
}
a {
color: #42b983;
}
</style>