Блог

У меня есть следующие коды из моего приложения: store/modules/user.js

 const state = {
  user: {
    id: "",
    email: "",
    orgName: "",
  },
  isLoggedin: false,
};

const getters = {
  currentUser: (state) => state,
  isLoggedin: (state) => state.isLoggedin,
}; 

router/index.js

 const routes = [{
    path: "/sign-up",
    name: "Signup",
    component: () =>
      import ("../views/auth/Signup.vue"),
  },
  {
    path: "/",
    name: "Login",
    component: () =>
      import ("../views/auth/Login.vue"),
  },
  {
    path: "/dashboard",
    name: "Dashboard",
    component: () =>
      import ("../views/Dashboard.vue"),
    meta: {
      requiresAuth: true
    },
  },

  {
    path: "/post",
    component: () =>
      import ("../views/Index"),
    meta: {
      requiresAuth: true
    },
    children: [{
        path: "/",
        name: "posts",
        component: () =>
          import ("../views/post/Index.vue"),
      },
      {
        path: "create",
        component: () =>
          import ("../views/post/Create.vue"),
      },
      {
        path: "view",
        component: () =>
          import ("../views/booking/View.vue"),
      },
    ],
  },
];

router.beforeEach((to, from, next) => {
  const requiresAuth = to.matched.some((x) => x.meta.requiresAuth);
  const isLoggedin = store.getters["isLoggedin"];
  console.log(router);
  if (requiresAuth amp;amp; !isLoggedin) {
    next("/");
  } else if (requiresAuth amp;amp; isLoggedin) {
    next();
  } else {
    next();
  }
}); 

С помощью приведенного выше кода только аутентифицированные пользователи могут получать доступ к маршрутам сообщений (создавать, просматривать, индексировать). Но вошедшие в систему пользователи все еще могут посетить страницу входа в систему и повторно войти.

state.user.isLoggedin имеет значение true при успешном входе пользователя в систему.

Я хотел бы перенаправить вошедших в систему пользователей на /dashboard тот момент, когда они нажмут URL-адрес для входа.

Какова была бы лучшая логика для этого ?

Точно так же, как вы создали requireAuth поток, вы также можете создать requireGuest поток:

 const routes = [{
    path: "/sign-up",
    name: "Signup",
    meta: {
      requiresGuest: true
    },
    component: () =>
      import ("../views/auth/Signup.vue"),
  },
  {
    path: "/",
    name: "Login",
    meta: {
      requiresGuest: true
    },
    component: () =>
      import ("../views/auth/Login.vue"),
  },
  {
    path: "/dashboard",
    name: "Dashboard",
    component: () =>
      import ("../views/Dashboard.vue"),
    meta: {
      requiresAuth: true
    },
  },

  {
    path: "/post",
    component: () =>
      import ("../views/Index"),
    meta: {
      requiresAuth: true
    },
    children: [{
        path: "/",
        name: "posts",
        component: () =>
          import ("../views/post/Index.vue"),
      },
      {
        path: "create",
        component: () =>
          import ("../views/post/Create.vue"),
      },
      {
        path: "view",
        component: () =>
          import ("../views/booking/View.vue"),
      },
    ],
  },
];

router.beforeEach((to, from, next) => {
  const requiresAuth = to.matched.some((x) => x.meta.requiresAuth);
  const requiresGuest = to.matched.some((x) => x.meta.requiresGuest);
  const isLoggedin = store.getters["isLoggedin"];
  console.log(router);
  if (requiresAuth amp;amp; !isLoggedin) {
    next("/");
  } else if (requiresGuest amp;amp; isLoggedin) {
    next("/dashboard");
  }  else {
    next();
  }
});
 

Вы можете использовать beforeEnter маршрут входа в систему для перенаправления зарегистрированных пользователей на панель мониторинга.

   {
    path: "/",
    name: "Login",
    component: () =>
      import ("../views/auth/Login.vue"),
    beforeEnter: async (to, from, next) => {
      const isLoggedIn = store.getters["isLoggedin"];

      if (isLoggedIn) {
          return next("/dashboard");
      }

      next();
    },
  },