vue如何配合后端token做一个登录状态判断详细写出完整代码

首先，在前端的登录页面中，用户输入账号和密码，然后通过axios发送POST请求向后端验证身份。后端验证成功后，返回一个token给前端。

前端需要存储这个token，可以使用localStorage或者cookie。在每次向后端发送请求时，都需要在请求头中携带这个token，以便后端进行身份验证。

下面是一个基于Vue和axios的登录状态判断的示例代码：

<template>
  <div>
    <div v-if="isLoggedIn">
      <!-- 用户已登录，显示用户信息 -->
      <h1>Welcome, {{ username }}!</h1>
      <button @click="logout">Logout</button>
    </div>
    <div v-else>
      <!-- 用户未登录，显示登录表单 -->
      <h1>Login</h1>
      <form @submit.prevent="login">
        <label for="username">Username:</label>
        <input type="text" id="username" v-model="username">
        <br>
        <label for="password">Password:</label>
        <input type="password" id="password" v-model="password">
        <br>
        <button type="submit">Login</button>
      </form>
    </div>
  </div>
</template>

<script>
import axios from 'axios';

export default {
  data() {
    return {
      isLoggedIn: false,
      username: '',
      password: '',
    };
  },
  methods: {
    login() {
      axios.post('/api/login', {
        username: this.username,
        password: this.password,
      }).then(response => {
        // 登录成功，保存token
        localStorage.setItem('token', response.data.token);
        this.isLoggedIn = true;
      }).catch(error => {
        console.error(error);
      });
    },
    logout() {
      // 清除token
      localStorage.removeItem('token');
      this.isLoggedIn = false;
    },
    checkLoginStatus() {
      const token = localStorage.getItem('token');
      if (token) {
        // 如果本地存储中存在token，则向后端验证token
        axios.get('/api/check_login', {
          headers: {
            Authorization: `Bearer ${token}`,
          },
        }).then(response => {
          // token验证成功，设置登录状态为true
          this.isLoggedIn = true;
        }).catch(error => {
          console.error(error);
        });
      }
    },
  },
  mounted() {
    // 在组件挂载时检查登录状态
    this.checkLoginStatus();
  },
};
</script>

在上面的代码中，我们使用了localStorage来存储token。在登录时，用户输入账号和密码，然后通过axios发送POST请求向后端验证身份。后端验证成功后，返回一个token给前端，我们把这个token保存在localStorage中。

在每次向后端发送请求时，都需要携带token，以便后端进行身份验证。我们使用axios的拦截器，在请求头中添加Authorization字段来携带token。

在组件挂载时，我们调用checkLoginStatus方法来检查用户是否已登录。如果本地存储中存在token，则向后端验证token。如果token验证成功，则设置登录状态为true，否则登录状态为false。

在模板中，我们使用v-if和v-else来根据登录状态显示不同的内容。如果用户已登录，则显示用户信息和Logout按钮；如果用户未登录，则显示登录表单。