Смотри.
Если ты делаешь фронт на ларавеле, а не под ларавел, то пусть будут перезагрузки, а уж если ты решил полноценное SPA приложение, почему бы не делать его отдельно? Сделай API на Laravel, поставь JWTAuth для Laravel и будет тебе счастье.
Будешь с фронта кидать запрос на авторизацию, тебе будет приходить токен, будешь его сохранять в localStorage.
Подключаешь Axios, после авторизации в Headers засовываешь access_token, складываешь в API роуты в группу с мидлвейром под JWTAuth и все.
Во Vue-Router используешь beforeEach, для проверок всяких. Например делаешь firstEnter для beforeEach.
Создаешь модуль для Vuex, store, у которого в state будет first_enter = true/false. Тем самым можешь при авторизации регулировать, загружать тебе все настройки у пользователя заново или нет.
// login.js
export default{
data(){
return {
login: '',
pass: '',
}
}
methods:{
auth(){
axios.post(api_root + '/login')
.then(res => {
if(res.data.access_token){
Vue.localStorage.set('access_token', res.data.access_token);
this.$store.commit('app/set_first_enter', true);
}
})
}
}
}
// app.store.js
const state = {
first_enter: true,
}
const mutations = {
set_first_enter(state, payload){
state.first_enter = !!payload;
},
exit(state,payload){
state.first_enter = true;
}
};
const actions = {}
const namespaced = {}
export default {namespaced, state, getters, mutations, actions}
//router.js
import VueRouter from 'vue-router';
import router from './routes' //роуты
const router = new VueRouter({
mode: 'history',
routes: routes,
});
router.beforeEach((to,from,next) => {
//Здесь все проверки нужные, например есть ли в локалсторадже токен или нет
});
export default router;
Средний