Question

问题是我无法在vue-router中获取cookie。当我尝试这样做时：this.$cookie.get('token');我得到this undefined。即使我可以在vue组件中使用this.$cookie。这是我的代码段：

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

如果您正在使用npm的 vue-cookie 插件，则需要在组件之外使用以下语法：

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

关于您的下一个不是函数错误，这是因为您正在调用不带参数isLoggedIn()的函数，而不是传递函数引用{{1} }，它将由路由器使用适当的参数调用。

尝试以下方法：

isLoggedIn

我希望这会有所帮助。

Answer 2

如果查看类型，您会发现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包并与{{1}一起使用}，也可以增加beforeEnter方法的返回类型：

cookies.get('token')

您仍然不能使用beforeEnter: (to, from, next) => isLoggedIn(to, from, next, $cookies)，因为它们不会向您公开in component guards，因为它们会在创建组件之前执行

无法在Vue路由器中获取Cookie才能正常工作。未定义的“ this”

2 个答案: