Блог

Это работает для меня, если пользователь не вошел в систему, однако else if это вообще не сработает, даже если путь маршрута «/login» и main.authState верен. Как мне это правильно настроить?

 
router.beforeEach((to, from, next) => {
  const main = useAuthStore(router.pinia);

  if (to.matched.some((record) => record.meta.authRequired)) {
    if (!main.authState) {
      return next("/login");
    }
  } else if(to.matched.some((record) => !record.meta.authRequired)) {
    if (to.path == "/login" amp;amp; main.authState == true) {
      alert(to.path) //"/login"
      alert(typeof(main.authState)) //"boolean"
      return next();
    }
  }
  next();
});
 

     async signOut() {
      await auth.logout();
      await localStorage.removeItem("authenticated");
      await router.replace({ name: "Login" });
    },
 

Если аутентификация не требуется для какого-либо маршрута, вы не должны проверять наличие authState . Если я неправильно понял, объясните.

 router.beforeEach((to, from, next) => {
  if (to.matched.some(record => record.meta.authRequired)) {
    const { authState } = useAuthStore(router.pinia);
   // Ensure what authState is true to proceed to next() route  

    authState
      ? next()
      : next('/login');
  } else {
    next();
  }
});
 

Вы можете использовать параметр URL-запроса для хранения целевого объекта перенаправления, к которому вы затем получаете доступ из своего Login.vue компонента, и можете установить значение по умолчанию для перенаправления, когда пользователь обращается к /login маршруту как аутентифицированный пользователь без предопределенного перенаправления.

 router.beforeResolve(async (to, from, next) => {
  if (to.matched.some((record) => record.meta.authRequired)) {
    const lastMathcedRoute = to.matched[to.matched.length - 1].path || "/";
    // "/" is just a fallback route
    const main = useAuthStore(router.pinia);
    const isAuthenticated = main.authState;

    if (!isAuthenticated ) {
      next({ path: "/login", query: { redirect: lastMathcedRoute } });
    } else {
      next();
    }
  } else {
    next();
  }
});
 

А затем в вашем компоненте входа в систему вы просто получаете доступ redirect к параметру запроса, если пользователь уже прошел проверку подлинности или когда его состояние аутентификации меняется. В принципе, вам нужно каким-то образом получать уведомления или следить за состоянием аутентификации и соответствующим образом перенаправлять пользователя. Таким образом, вам нужно authState быть реф или реактивным объектом, за которым вы можете наблюдать.

 // Login.vue
import { useRouter } from "vue-router";

setup() {
  const router = useRouter();
  const { authState } = useAuthStore(router.pinia);

  watch(authState, () => {
    if (authState) {
      const redirectLocation = route.query?.redirect?.toString() || '/pannel'; 
      // here '/panel' is the default redirect
      return router.push(redirectLocation);
    }
  }, { immediate: true } )

}
 

ПРОФЕССИОНАЛЬНЫЙ совет: обратите { immediate: true } внимание , это делает так , что часы немедленно срабатывают с начальным значением authState , вместо того, чтобы срабатывать только тогда, когда оно меняется. Это полезно в том случае, если состояние AUTH уже является истинным и оно не изменяется.

Вы можете использовать другие механизмы вместо a watcher , но в принципе решение то же самое.