本地token的三种操作 存,取, 删

const Key = 'geek-client-pc-store'

1.存token

export const setToken = (token) => {
  localStorage.setItem(Key, token)
}

2.取token

export const getToken = () => {
  return localStorage.getItem(Key)
}

3.删除token

export const removeToken = () => {
  localStorage.removeItem(Key)
}

  • 0
    点赞
  • 2
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
好的,您想了解如何在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储在本地。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值