用vue2写一个完整的登录页面 路由中并验证token过期没过期 需不需要重新登陆

为了完成这个任务，你需要掌握Vue.js的基本知识，了解Vue Router和Axios的基本用法，并且需要对Token的概念有一定的理解。

首先，我们需要创建一个Vue项目并安装Vue Router和Axios：

vue create my-login-page
cd my-login-page
npm install vue-router axios

接下来，我们需要创建一个登录页面组件。在src目录下创建一个Login.vue文件，代码如下：

<template>
  <div>
    <form>
      <input type="text" placeholder="用户名" v-model="username">
      <input type="password" placeholder="密码" v-model="password">
      <button type="submit" @click.prevent="login">登录</button>
    </form>
  </div>
</template>

<script>
import axios from 'axios';

export default {
  data() {
    return {
      username: '',
      password: ''
    };
  },
  methods: {
    login() {
      axios.post('/api/login', {
        username: this.username,
        password: this.password
      }).then(response => {
        localStorage.setItem('token', response.data.token);
        this.$router.push('/dashboard');
      }).catch(error => {
        console.error(error);
      });
    }
  }
}
</script>

上面的代码中，我们创建了一个表单，用户可以输入用户名和密码进行登录。当用户点击登录按钮后，我们使用Axios发送一个POST请求到后端API，传递用户名和密码，并且在成功登录后将返回的Token保存到localStorage中。最后，我们使用Vue Router将用户重定向到仪表盘页面。

接下来，我们需要创建一个仪表盘页面组件。在src目录下创建一个Dashboard.vue文件，代码如下：

<template>
  <div>
    <h1>欢迎来到仪表盘页面！</h1>
    <button @click="logout">退出登录</button>
  </div>
</template>

<script>
import axios from 'axios';

export default {
  methods: {
    logout() {
      localStorage.removeItem('token');
      this.$router.push('/login');
    }
  },
  created() {
    axios.get('/api/dashboard', {
      headers: {
        Authorization: `Bearer ${localStorage.getItem('token')}`
      }
    }).then(response => {
      console.log(response);
    }).catch(error => {
      console.error(error);
      localStorage.removeItem('token');
      this.$router.push('/login');
    });
  }
}
</script>

上面的代码中，我们创建了一个欢迎消息和一个退出登录按钮。当用户点击退出登录按钮后，我们会从localStorage中移除Token并且重定向到登录页面。在组件创建时，我们使用Axios发送一个GET请求到后端API，并且在请求头中加入Token。如果Token验证通过，我们将在控制台输出响应内容；否则，我们将从localStorage中移除Token并且重定向到登录页面。

接下来，我们需要配置Vue Router和路由守卫。在src目录下创建一个router.js文件，代码如下：

import Vue from 'vue';
import VueRouter from 'vue-router';
import Login from './Login.vue';
import Dashboard from './Dashboard.vue';

Vue.use(VueRouter);

const router = new VueRouter({
  routes: [
    {
      path: '/login',
      component: Login
    },
    {
      path: '/dashboard',
      component: Dashboard,
      meta: {
        requiresAuth: true
      }
    }
  ]
});

router.beforeEach((to, from, next) => {
  if (to.meta.requiresAuth && !localStorage.getItem('token')) {
    next('/login');
  } else {
    next();
  }
});

export default router;

上面的代码中，我们创建了两个路由，分别对应登录页面和仪表盘页面。在仪表盘页面路由中，我们使用meta字段标记该页面需要Token验证。然后，我们使用路由守卫，在每次路由跳转前检查localStorage中是否存在Token。如果存在Token，我们继续跳转；否则，我们重定向到登录页面。

最后，我们需要在main.js中挂载Vue Router并且启动我们的应用。代码如下：

import Vue from 'vue';
import App from './App.vue';
import router from './router';

Vue.config.productionTip = false;

new Vue({
  router,
  render: h => h(App)
}).$mount('#app');

现在，我们已经完成了一个基本的登录页面，并且使用Vue Router和Axios进行了Token验证。用户在登录成功后，我们会将Token保存到localStorage中，并且在后续的请求中带上Token进行验证。如果Token过期或者用户未登录，我们会重定向到登录页面。