Невозможно получить cookie в vue-router для работы.Не определено "это"

Question

Проблема в том, что я не могу получить cookie в vue-router.Когда я пытаюсь сделать это: this.$cookie.get('token'); я получаю this undefined.Хотя я могу использовать this.$cookie в компонентах vue.Это мой фрагмент кода:

Vue-Router:

Это функция для проверки, если я получаю токен из cookie (но он не работает):

function isLoggedIn (to, from, next) {
  console.log(this.$cookie.get('token'));
}

И это маршрут, и я использую в нем isLoggedIn:

{
  path: '/',
  name: 'login',
  component: Login,
  beforeEnter: isLoggedIn()
},

Может быть, кто-то знает, как получить этот файл cookie?Он правильно настроен в компоненте vue, просто не знаю, как передать его в маршрутизатор vue.

РЕДАКТИРОВАТЬ Таким образом, используя Vue.cookie.get('token');, я получаю это next is not a function.Это текущая функция:

function isLoggedIn (to, from, next) {
  if(Vue.cookie.get('token')) {
    next({name: 'game'});
  } else {
    next();
  }
}

Хорошо, поэтому, когда я добавил эту функцию непосредственно в маршрут, она работала так:

{
  path: '/',
  name: 'login',
  component: Login,
  beforeEnter: (to, from, next) => {
    if(Vue.cookie.get('token')) {
      next('/game');
    } else {
      next;
    }
  }
},

Answer 1

Если вы посмотрите на набор текста, вы увидите, что оба значения to и from являются Route. Вот их объявление интерфейса:

export interface Route {
  path: string;
  name?: string;
  hash: string;
  query: Dictionary<string | (string | null)[]>;
  params: Dictionary<string>;
  fullPath: string;
  matched: RouteRecord[];
  redirectedFrom?: string;
  meta?: any;
}

Если посмотреть на определение BeforeEnter:

beforeEnter?: NavigationGuard;

Если вы посмотрите на определение NavigationGuard:

export type NavigationGuard<V extends Vue = Vue> = (
  to: Route,
  from: Route,
  next: (to?: RawLocation | false | ((vm: V) => any) | void) => void
) => any

Итак, как мы видим, beforeEnter возвращает closure, который предоставляет нам 3 метода: (to, from, next).

Поскольку мы видим, что наборы to и from являются просто Route Interfaces, а next является функцией, в которую мы передаем аргументы, мы можем с уверенностью определить, что область действия this действительно undefined.

Таким образом, вы можете либо определить его в мета декларации Route и получить к нему доступ с помощью this.$meta.cookies, либо напрямую импортировать пакет cookie и использовать его с cookies.get('token'), либо вы можете увеличить тип возвращаемого значения метода beforeEnter:

beforeEnter: (to, from, next) => isLoggedIn(to, from, next, $cookies)

Вы по-прежнему не можете использовать in component guards, поскольку они не предоставляют вам this, поскольку они выполняются до создания компонента

Answer 2

Если вы используете плагин vue-cookie от npm, вам нужно будет использовать этот синтаксис вне компонентов:

function isLoggedIn (to, from, next) {
  console.log(Vue.cookie.get('token'));
}

Что касается вашего next, то это не ошибка функции , это потому, что вы вызываете свою функцию без аргументов isLoggedIn() вместо передачи ссылки на функцию isLoggedIn, которая будет вызывается маршрутизатором с соответствующими аргументами.

Попробуйте вместо этого:

{
  path: '/',
  name: 'login',
  component: Login,
  beforeEnter: isLoggedIn // No parentheses here
},

Надеюсь, это поможет.