用vue2 cookie做一个登录失效的页面

在Vue2中使用`vue-cookie`库可以很方便地处理Cookie。你可以使用该库来实现一个登录失效的页面。下面是一个示例：

首先，安装`vue-cookie`库：

npm install vue-cookie

然后，在你的Vue项目中，创建一个名为`ExpiredPage.vue`的组件，用于显示登录失效的页面内容。在该组件的`created`钩子函数中，你可以使用`vue-cookie`库来检查是否存在登录相关的Cookie，如果不存在则表示登录已失效。

<template>
  <div>
    <h1>登录已失效</h1>
    <p>请重新登录</p>
  </div>
</template>

<script>
import VueCookie from "vue-cookie";

export default {
  created() {
    const isLoggedIn = VueCookie.get("isLoggedIn");
    if (!isLoggedIn) {
      // 登录已失效，执行相关操作，例如跳转到登录页面
      this.redirectToLogin();
    }
  },
  methods: {
    redirectToLogin() {
      // 执行跳转到登录页面的操作
      // 例如使用Vue Router进行跳转
      this.$router.push("/login");
    }
  }
};
</script>

在上面的代码中，我们首先导入了`vue-cookie`库并将其命名为`VueCookie`。然后，在`created`钩子函数中，我们使用`VueCookie.get()`方法检查是否存在名为"isLoggedIn"的Cookie。如果不存在，则表示登录已失效，我们可以执行一些操作来处理失效情况，例如跳转到登录页面。

请注意，上述示例代码仅为参考，实际应用中你可能需要根据你的具体需求进行适当的修改。

最后，将`ExpiredPage.vue`组件添加到你的路由配置中，以便在登录失效时显示该页面。

希望对你有所帮助！