使用vue通过刷新改变token的真值为false

在 Vue 中，我们可以通过在 `created` 钩子函数中检查本地存储中的 token 是否存在来判断用户是否已经登录。如果 token 存在，则将 Vue 实例的 `loggedIn` 属性设置为 `true`。如果 token 不存在或已过期，则将 `loggedIn` 属性设置为 `false`。

当用户点击退出按钮时，我们需要将本地存储中的 token 删除，并将 `loggedIn` 属性设置为 `false`。这将导致 Vue 组件重新渲染，用户将被重定向到登录页面。

下面是一个简单的示例代码：

<template>
  <div>
    <h1>欢迎来到我的网站</h1>
    <div v-if="loggedIn">
      <p>您已登录</p>
      <button @click="logout">退出</button>
    </div>
    <div v-else>
      <p>请先登录</p>
      <router-link to="/login">登录</router-link>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      loggedIn: false
    }
  },
  created() {
    const token = localStorage.getItem('token')
    if (token) {
      // 检查token是否过期，如果没有过期则设置loggedIn为true
      this.loggedIn = true
    }
  },
  methods: {
    logout() {
      localStorage.removeItem('token')
      // 设置loggedIn为false以重新渲染组件
      this.loggedIn = false
    }
  }
}
</script>

当用户登录成功时，我们需要将 token 存储到本地存储中，同时将 `loggedIn` 属性设置为 `true`。这将导致 Vue 组件重新渲染，并将用户重定向到首页。

async login() {
  const response = await fetch('/api/login', {
    method: 'POST',
    headers: { 'Content-Type': 'application/json' },
    body: JSON.stringify(this.loginData)
  })
  const data = await response.json()
  if (data.success) {
    localStorage.setItem('token', data.token)
    this.loggedIn = true
    this.$router.push('/')
  } else {
    alert(data.message)
  }
}

最后，在后台服务器中，我们需要检查传入的 token 是否有效，并在用户退出时将 token 从数据库中删除。

// 检查token是否有效
app.use((req, res, next) => {
  const token = req.headers.authorization
  if (token) {
    try {
      const decoded = jwt.verify(token, secret)
      req.user = decoded
    } catch (err) {
      res.status(401).json({ success: false, message: '无效的token' })
      return
    }
  }
  next()
})

// 处理退出请求
app.post('/api/logout', (req, res) => {
  const token = req.headers.authorization
  if (token) {
    // 从数据库中删除token
    // ...
  }
  res.json({ success: true })
})

这只是一个简单的示例代码，需要根据具体的需求进行修改和完善。