проблема перенаправления в защищенном маршруте - Vue JS Router

Question

У меня есть этот маршрут в моем файле vue router.js.

routes: [{
      path: "/",
      component: Home,
      beforeEnter: (to, from, next) => {
        if (!store.state.is_login) {
          next('/login')
        }
        next()
      }
    }]

Я использую параметр beforeEnter для перенаправления пользователя, если store.state.is_login === true

первая проблема: поэтому, когда я ввожу URL в браузере, я буду перенаправлять на страницу / логин.это работает нормально.но когда я нажимаю кнопку с логотипом, эта функция beforeEnter не работает.это моя кнопка, которая использует:

<router-link to="/" class="bp-logo"><Logo />home</router-link>

вторая проблема:

1. is_login находится в моем store.state.is_login
2. Я храню свой токенв localStorage
3. user_info находится в store.state.user

проблема:

условие 1: если! is_login перенаправить на / login.

условие 2: если токен существует и! is_login => запросить бэкэнд / пользователя с токеном и получить user_info и установить is_login true.

условие 3: если! Is_login &&! Token перенаправить на / login

Answer 1

Вам нужно изменить метод beforeEnter, чтобы получить доступ к экземпляру магазина. Перепишите так:

beforeEnter: (to, from, next) => {
        if (!this.$store.state.is_login) {
          next('/login')
        }
        next()
      }

Answer 2

Я как-то разобрался.Первая проблема была при рендеринге маршрута. Затем вы нажимаете, чтобы снова попасть на этот маршрут, функция router.beforeEach не срабатывает.поэтому я нахожу другой метод в документации.

routes: [{
      path: "/",
      component: Home,
      beforeEnter: isAuthenticated,
    }]

и это моя пользовательская функция для решения обеих проблем.

const isAuthenticated = (to, from, next) => {
  if (!store.state.is_login) {
    if ((localStorage.getItem('token')) && (lodash.isEmpty(store.state.user))) {
      let headers = {
        headers: {
          Authorization: localStorage.getItem("token"),
          "Access-Control-Allow-Origin": "*"
        }
      };
      axios
        .get(`${store.state.api}admin/user`, headers)
        .then(response => {
          store.state.user = response.data.user;
          store.state.is_login = true;
          next("/");
        })
        .catch(error => {
          store.state.Error = error;
          next('/login')
        });
    }
    next('/login')
    return
  }
  next()
  return
}