vue3登录 token存本地
时间: 2023-07-03 12:15:42 浏览: 82
好的,您想了解如何在Vue3中实现登录并将token存储在本地吗?
首先,在登录成功后,将token存储在本地可以使用浏览器提供的localStorage或sessionStorage。在Vue3中,可以在Vue实例的创建过程中,通过创建一个全局的$store对象来实现存储和管理状态数据。
以下是一些示例代码,可以帮助您更好地了解如何在Vue3中实现登录并将token存储在本地:
1. 在登录页面中,您可以通过表单提交来处理用户输入的登录信息,如下所示:
```
<template>
<form @submit.prevent="login">
<label>
Email:
<input type="email" v-model="email" required>
</label>
<label>
Password:
<input type="password" v-model="password" required>
</label>
<button type="submit">Login</button>
</form>
</template>
<script>
export default {
data() {
return {
email: '',
password: ''
}
},
methods: {
async login() {
// 发送登录请求并获取token
const { token } = await api.login(this.email, this.password)
// 将token存储到本地
localStorage.setItem('token', token)
// 跳转到首页或其他需要登录的页面
this.$router.push('/')
}
}
}
</script>
```
2. 在Vue实例的创建过程中,可以创建一个全局的$store对象来存储和管理状态数据,如下所示:
```
import { createStore } from 'vuex'
const store = createStore({
state() {
return {
token: localStorage.getItem('token') || null
}
},
mutations: {
setToken(state, token) {
state.token = token
}
}
})
export default store
```
在上面的代码中,我们通过使用localStorage.getItem('token')来获取本地存储的token值,并将其存储在Vuex的状态管理中。
3. 在需要使用token的地方,可以通过Vuex的getters来获取存储在状态管理中的token值,如下所示:
```
<template>
<div v-if="$store.getters.isAuthenticated">
<!-- 显示需要登录后才能访问的内容 -->
</div>
<div v-else>
<p>Please login to access this content.</p>
</div>
</template>
<script>
export default {
computed: {
isAuthenticated() {
return !!this.$store.state.token
}
}
}
</script>
```
在上面的代码中,我们使用了Vuex的getters来获取存储在状态管理中的token值,并将其用于判断用户是否已经登录。
希望这些示例代码能够帮助您更好地了解如何在Vue3中实现登录并将token存储在本地。