로그인한 사용자의 vue 로그인 경로 방문 중지

로그인한 사용자의 vue 로그인 경로 방문 중지

앱에 스토어/모듈/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 && !isLoggedin) {
    next("/");
  } else if (requiresAuth && 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 && !isLoggedin) {
    next("/");
  } else if (requiresGuest && 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();
    },
  },

언급URL : https://stackoverflow.com/questions/68678479/stop-logged-in-users-from-visiting-login-route-in-vue