Use FreshApiToken instead of Personal access token for front-end auth

This commit is contained in:
Bubka
2021-10-22 14:18:13 +02:00
parent 62d223ef72
commit d6306e5dd0
12 changed files with 65 additions and 60 deletions

23
resources/js/api.js vendored
View File

@@ -7,27 +7,18 @@ Vue.use(VueAxios, axios)
Vue.axios.defaults.headers.common['X-Requested-With'] = 'XMLHttpRequest';
let token = document.head.querySelector('meta[name="csrf-token"]');
if (token) {
Vue.axios.defaults.headers.common['X-CSRF-TOKEN'] = token.content;
} else {
console.error('CSRF token not found: https://laravel.com/docs/csrf#csrf-x-csrf-token');
}
// let token = document.head.querySelector('meta[name="csrf-token"]');
// if (token) {
// Vue.axios.defaults.headers.common['X-CSRF-TOKEN'] = token.content;
// } else {
// console.error('CSRF token not found: https://laravel.com/docs/csrf#csrf-x-csrf-token');
// }
Vue.axios.interceptors.request.use(function (request) {
const authToken = localStorage.getItem('jwt')
if(authToken) {
request.headers.common['Authorization'] = 'Bearer ' + authToken
}
request.headers.common['Content-Type'] = 'application/json'
return request
})
Vue.axios.interceptors.response.use(response => response, error => {
@@ -46,8 +37,6 @@ Vue.axios.interceptors.response.use(response => response, error => {
let routeName = 'genericError'
if ( error.response.status === 401 ) {
localStorage.removeItem('jwt');
localStorage.removeItem('user');
routeName = 'login'
}

View File

@@ -12,7 +12,7 @@ Vue.mixin({
async appLogout(evt) {
await this.axios.get('api/user/logout')
await this.axios.get('/user/logout')
this.$storage.clear()
delete this.axios.defaults.headers.common['Authorization']

View File

@@ -56,21 +56,9 @@ router.beforeEach((to, from, next) => {
to.params.isFirstLoad = isFirstLoad ? true : false
isFirstLoad = false;
}
if (to.matched.some(record => record.meta.requiresAuth)) {
// Accesses to restricted pages without a jwt token are routed to the login page
if ( !localStorage.getItem('jwt') ) {
next({
name: 'login'
})
}
// If the jwt token is invalid, a 401 unauthorized is send by the php backend
else {
next()
}
}
else next()
next()
});
router.afterEach(to => {

View File

@@ -37,14 +37,9 @@
handleSubmit(e) {
e.preventDefault()
this.form.post('/api/user/login', {returnError: true})
this.form.post('/user/login', {returnError: true})
.then(response => {
localStorage.setItem('user',response.data.name)
localStorage.setItem('jwt',response.data.token)
if (localStorage.getItem('jwt') != null){
this.$router.push({ name: 'accounts', params: { toRefresh: true } })
}
this.$router.push({ name: 'accounts', params: { toRefresh: true } })
})
.catch(error => {
if( error.response.status === 401 ) {
@@ -61,9 +56,9 @@
},
beforeRouteEnter (to, from, next) {
if (localStorage.getItem('jwt')) {
return next('/');
}
// if (localStorage.getItem('jwt')) {
// return next('/');
// }
next(async vm => {
const { data } = await vm.axios.get('api/user/name')

View File

@@ -33,12 +33,7 @@
this.form.post('/api/user', {returnError: true})
.then(response => {
localStorage.setItem('user',response.data.name)
localStorage.setItem('jwt',response.data.token)
if (localStorage.getItem('jwt') != null){
this.$router.push({ name: 'accounts', params: { toRefresh: true } })
}
this.$router.push({ name: 'accounts', params: { toRefresh: true } })
})
.catch(error => {
console.log(error.response)