Przekierowanie w VUE gdy użytkownik nie jest zalogowany do formularza logowania

0

Witajcie,
Próbuję ogarnąć Vue i trafiłem na mały problem. Robię aplikację w Laravelu oraz Vue. Mam taki kod:

import Vue from 'vue'
import Router from 'vue-router'

// Containers
const TheContainer = () => import('@/containers/TheContainer')

// Views
const Dashboard = () => import('@/views/Dashboard')
....

Vue.use(Router)

let router = new Router({
  mode: 'hash', // https://router.vuejs.org/api/#mode
  linkActiveClass: 'active',
  scrollBehavior: () => ({ y: 0 }),
  routes: configRoutes()
})


router.beforeEach((to, from, next) => {
  let roles = localStorage.getItem("roles");

  if(roles != null){
    roles = roles.split(',')
  }
  if(to.matched.some(record => record.meta.requiresAdmin)) {
    if(roles != null && roles.indexOf('admin') >= 0 ){
      next()
    }else{
      next({
        path: '/login',
        params: { nextUrl: to.fullPath }
      })
    }
  }else if(to.matched.some(record => record.meta.requiresUser)) {
    if(roles != null && roles.indexOf('user') >= 0 ){
      next()
    }else{
      next({
        path: '/login',
        params: { nextUrl: to.fullPath }
      })
    }
  }else{
    next()
  }
})

export default router

function configRoutes () { 
  return [
    {
      path: '/',
      redirect: '/dashboard',
      name: 'Home',
      component: TheContainer,
      children: [
        {
          path: 'dashboard',
          name: 'Dashboard',
          component: Dashboard
        },
          ]
        },
  ]
}
  1. Kiedy użytkownik nie jest zalogowany - ma zawsze nastąpić przekierowanie na (/login) - nie jak jest aktualnie do /dashboard
  2. Kiedy użytkownikowi wygaśnie sesja to jw

Jeśli użytkownik jest zalogowany, to nie ma mieć możliwości wejścia na /login, a jego główną stroną ma być /dashboard

Jak to poprawić? Z góry dziękuję za pomoc :)

0

Cześć, jeżeli chodzi o przekierowanie do /login kiedy użytkownik nie jest zalogowany to w moim przypadku wykorzystałem middleware. Zrobiłem folder middleware, a w nim plik auth.js (middleware/auth.js)

Plik auth.js

export default function (next, store) {
    if (!store.state.isLoggedIn) {
        next("/");
        store.commit('openLoginModal');
        console.log("Przekierowanie na strone startowa i otwarcie modalu logowania.");
    }

    else {
        next();
    }
}

W store mam zmienną isLoggedIn, która przechowuje informację o tym czy użytkownik jest zalogowany bądź nie jest.

router.beforeEach((to, _, next) => {
    if (to.meta.middleware) {
        const middleware = require(`./middleware/${to.meta.middleware}`);
        console.log(`nazwa pliku: ${to.meta.middleware}`);
        if (middleware) {
            middleware.default(next, store);
        }

        else {
            next();
        }
    }

    else {
        next();
    }
})

1 użytkowników online, w tym zalogowanych: 0, gości: 1