Я пытаюсь обернуться вокруг штурмана для vue. js. Я пытался следовать примеру, но думаю, что мне не удается подключить мой штат (store. js) к моему маршрутизатору (маршруты. js). В моем компоненте Login. vue я пытаюсь перевести sh на новый маршрут после того, как loadUser отправил в State, и впоследствии isLoggedIn обновится до true. В компонентах vue, которые я использую mapState, мне нужно делать то же самое здесь, в маршрутах. js. Или, может быть, есть лучший способ сделать это. Чтобы получить полную картину, я использую vue интерфейс и laravel интерфейс с Sanctum.
Извлечение из маршрутов. js
const routes = [
{
path: '/',
component: Login,
name: 'login'
},
{
path: '/dashboard',
component: Dashboard,
name: 'dashboard',
meta: { requiresAuth: true }
},
]
const router = new VueRouter({
mode: 'history',
routes // short for `routes: routes`
});
router.beforeEach((to, from, next) => {
// if (to.matched.some(record => record.meta.requiresAuth)) {
if (to.meta.requiresAuth) {
if (store.state.isLoggedIn) {
next();
} else {
next({
name: 'home'
});
}
} else {
next();
}
});
export default router;
Извлечение из магазина. js
export default {
state : {
isLoggedIn: false,
}
}
Выписка из логина. vue
methods : {
async login() {
this.loading = true;
this.errors = null;
try {
await axios.get('/sanctum/csrf-cookie');
await axios.post('/login', this.user);
logIn();
this.$store.dispatch('loadUser');
this.$router.push({ name: 'logbook'});
} catch (error) {
this.errors = error.response && error.response.data.errors;
}
this.loading = false;
}
},