Как организовать разделы сайта на Vue?

Проект на Vue + Laravel.
У публичной части сайта есть два формальных раздела: авторизация и личный кабинет. Между ними нет ничего общего в дизайне и функционале.
Так же есть несколько статичных страничек, которые доступны вне зависимости от того, авторизован ли пользователь.

И возник у меня вопрос: стоит ли объединять авторизацию и ЛК в одну точку входа или все же сделать два разных файла и на Laravel, соответственно, будет два основных шаблона. Ну и переход при авторизации будет осуществляться с перезагрузкой, что вроде как минус.

Тоже самое касается отдельных страниц.

Меня смущает именно то, что вроде SPA и не должно быть перезагрузок, а вроде и удобнее будет разделить всю эту логику.

Страницы:
- home
- about
- help
- auth:
  - signup
  - signin
  - reset pass
  - new pass
- lk:
  - dashboard
  - analytics
  - refer
  - etc.
  • Вопрос задан
  • 197 просмотров
Решения вопроса 2
aleksejjjj
@aleksejjjj
Не являюсь экспертом, могу посоветовать плохого. Но недавно у меня была схожая проблема и я совершил преступление. Разделил эти сущности. Меня тоже долго ломало - как так, SPA и вдруг раздельные страницы. Но потом для себя я решил, если это удобнее с точки зрения разработчика и практически незаметно для конечного пользователя, то чего ради страдать и пытаться вписаться в некую концепцию которую вы даже не до конца понимаете? Фейсбук например не парится и иногда перезагружает страницы при необходимости. А там работают парни поумнее меня.
Ответ написан
@Orfen
Смотри.
Если ты делаешь фронт на ларавеле, а не под ларавел, то пусть будут перезагрузки, а уж если ты решил полноценное 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;
Ответ написан
Пригласить эксперта
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы
26 сент. 2020, в 15:07
1000 руб./за проект
26 сент. 2020, в 14:52
600 руб./за проект