vue3 token 自动登录

在Vue3中实现token的自动登录可以通过以下步骤：

1. 在用户登录成功后，将获取到的token存储到sessionStorage中，可以使用`sessionStorage.setItem('token', token)`来实现。
2. 在Vuex的store中，创建一个state属性来存储token，可以使用`state: { token: sessionStorage.getItem('token') || '' }`来初始化token的值。
3. 在main.js中使用导航守卫来进行路由跳转的判断。首先判断目标路由是否为登录页，如果是，则直接跳转。否则，从store中获取token的值，如果token为空，则跳转到登录页，否则继续跳转到目标路由。
4. 在登录页或任何需要验证登录状态的组件中，通过调用store中的token来判断用户是否已登录。如果token为空，则说明用户未登录，需要跳转到登录页。

以下是一个示例代码，演示了如何实现Vue3中的token自动登录：

在store/index.js中：

import { createStore } from 'vuex'

const store = createStore({
  state: {
    token: sessionStorage.getItem('token') || ''
  }
})

export default store

在main.js中：

import { createApp } from 'vue'
import App from './App.vue'
import router from './router'
import store from './store'

const app = createApp(App)
app.use(router)
app.use(store)

router.beforeEach((to, from, next) => {
  if (to.path === '/login') {
    next()
  } else {
    const token = store.state.token
    if (token === '') {
      next('/login')
    } else {
      next()
    }
  }
})

app.mount('#app')

在登录组件中：

<template>
  <div>
    <!-- 登录表单 -->
    <form>
      <!-- 表单输入项 -->
    </form>
    <!-- 登录按钮 -->
    <button @click="login">登录</button>
  </div>
</template>

<script>
export default {
  methods: {
    login() {
      // 登录逻辑
      // ...

      // 登录成功后将token存储到sessionStorage中
      sessionStorage.setItem('token', token)

      // 跳转到其他页面
      this.$router.push('/index')
    }
  }
}
</script>

通过以上步骤，你可以在Vue3中实现token的自动登录功能。当用户成功登录并获取到token时，将token存储到sessionStorage中，并在每次路由跳转前检查token的值来判断用户是否已登录。<span class="em">1</span><span class="em">2</span><span class="em">3</span>
#### 引用[.reference_title]
- *1* *2* *3* [vue实现token登录](https://blog.csdn.net/weixin_43896327/article/details/115244762)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v92^chatsearchT0_1"}}] [.reference_item style="max-width: 100%"]
[ .reference_list ]