Đỗ Đức Hoàng

mình thường dùng theo cách này trong file router mình dùng một hàm check authen

Đây là app mình sử dụng token để authen nên sẽ có 2 bước check một là có token không rồi đến validateToken cái này mình xử lý trong store nên dùng getters để lấy trạng thái . Nếu đã login thì cho ở path đấy còn nếu không sẽ bị đẩy về /home

const ifAuthenticated = async (to, from, next) => {
  if (store.getters.isHaveToken) {
    store.dispatch("validateToken").then(() => {
      if (!store.getters.isAuthenticated) {
        next();
        return;
      } else next("/home");
    });
  } else next("/home");
};

Sau đó sử dụng beforeEnter để check.

const routes = [
  {
    path: "/",
    name: "Welcome",
    component: Welcome,
    beforeEnter: ifAuthenticated
  },
...]

Nhược điểm là tiến trình phải xử lý tuần tự vì việc validate token lên server sẽ tốn thời gian. Cái này có một cách là làm màn hình loading và trong store quản lý một state là isLoading = true nếu đang load và false khi load xong.