vue3 sessionstorage存储token

你好！关于你的问题，我们可以使用sessionStorage来存储token。具体操作如下：

1.在登录成功后，将后端返回的token存储到sessionStorage中。

2.在需要验证身份的请求（如获取用户信息等）中，从sessionStorage中读取token并附加到请求头中。

3.在退出登录时，删除sessionStorage中存储的token。

希望能对你有所帮助！如果你有其他的问题，欢迎继续提出。

相关问题

vue3 axios 获取token

### Vue3 使用 Axios 获取 Token 的示例

在 Vue3 项目中使用 Axios 获取 Token 主要涉及配置 Axios 实例以及处理认证逻辑。以下是具体实现方式：

#### 创建 Axios 实例
为了更好地管理 HTTP 请求，建议创建一个独立的 Axios 实例来设置默认参数和其他全局配置。

// request/index.js
import axios from 'axios';

const service = axios.create({
  baseURL: process.env.VUE_APP_BASE_API, // API base_url
  timeout: 5000                          // Request timeout
});

export default service;

此代码片段展示了如何初始化带有基础 URL 和超时时间的 Axios 客户端实例[^4]。

#### 登录接口定义
接下来定义用于登录操作的具体函数，该函数会向服务器发送用户名和密码，并接收返回的 Token 数据。

// apis/user.ts
import service from '@/request/index';
interface ILoginData {
  username: string,
  password: string
}

export function login(data: ILoginData) {
  return service({
    url: '/login',                       // 替换成实际API路径
    method: 'POST',
    data                              // 发送的数据体
  });
}

这段 TypeScript 代码描述了一个名为 `login` 的异步函数，它接受用户凭证作为输入并通过 POST 请求将其提交给指定的服务端点以换取访问令牌。

#### 存储与应用 Token
一旦成功获得 Token 后，则需妥善保存以便后续请求携带身份验证信息。通常做法是在本地存储 (localStorage 或 sessionStorage)，并在每次发起新请求前自动附加 Authorization 头部字段。

// utils/auth.ts
import { localStorage } from '@vueuse/core'

function setToken(token:string){
  window.localStorage.setItem('token', token);
}

function getToken(){
  return window.localStorage.getItem('token');
}

export {setToken,getToken};

上述 JavaScript 函数提供了两个工具方法：一个是用来把接收到的新 Token 放入浏览器缓存；另一个是从那里读取现有记录供其他组件调用[^1].

#### 自动附带 Token 到请求头
为了让所有发出的请求都包含有效的授权凭据，可以在 Axios 拦截器里做统一处理。

// request/index.js 继续...
service.interceptors.request.use(
  config => {
    const token = getToken();
    if (token) {
      config.headers['Authorization'] = `Bearer ${token}`;
    }
    return config;
  },
  error => Promise.reject(error)
);

export default service;

这里修改了之前创建好的 Axios 实例对象，在其请求拦截链上加入了一段逻辑，确保每一次对外通信都会带上当前用户的鉴权标志——即 Bearer 类型下的 Access Token[^3].

#### 调用 Login 并处理响应
最后一步就是在适当的地方触发这个流程，比如在一个表单提交事件处理器内部完成整个过程。

<template>
  <!-- ... -->
</template>

<script setup lang="ts">
import { ref } from 'vue'
import { useRouter } from 'vue-router'
import { useStore } from '../store'
import { login as loginUser } from '@/apis/user'
import { setToken } from '@/utils/auth'

const router = useRouter()
const store = useStore()

async function handleLogin() {
  try {
    let res = await loginUser({username:'admin',password:'123'})
    console.log(res.data.token);          // 打印出服务端返回的结果中的 token 字段
    setToken(res.data.token);             // 将获取到的 token 设置进 storage 中去
    router.push('/dashboard');            // 成功后跳转至仪表盘页面或其他受保护路由
  } catch(err){
    alert(`登录失败:${err.message}`);     // 如果发生错误则给出提示信息
  }
}
</script>

以上模板部分省略不显，重点在于脚本标签内的业务逻辑编写。当点击按钮或者其他交互行为激活 `handleLogin()` 方法执行时，便会依照既定顺序依次尝试连接远程主机、解析 JSON 格式的回复内容并将其中的关键数据项提取出来加以利用[^2].

在 vue 中存储全局token

### 回答1：
在 Vue 中存储全局 token 的一种常见方式是使用 Vuex 状态管理库。Vuex 可以在应用程序的多个组件之间共享状态。您可以在 Vuex 的 store 中创建一个状态（例如 token），并且可以在整个应用程序中访问该状态。

要使用 Vuex 存储 token，请按照以下步骤进行操作：

1. 安装 Vuex：您可以使用 npm 或 yarn 安装 Vuex。

2. 创建 store：在您的项目中创建一个 store.js 文件，并使用 Vuex.createStore() 方法创建一个 store 对象。

3. 定义状态：在 store 对象中定义一个状态对象，例如 { token: null }。

4. 编写 mutations：编写一个 mutations 对象，该对象包含一个 setToken() 方法，该方法将在调用时设置 token 状态。

5. 在组件中使用：使用 Vue.use() 方法将 Vuex 安装到您的应用程序中，并使用 this.$store.state.token 在组件中访问 token 状态。

这是一个示例代码，展示了如何在 Vuex 中存储 token：

// store.js

import Vuex from 'vuex'
import Vue from 'vue'

Vue.use(Vuex)

const store = Vuex.createStore({
  state: {
    token: null
  },
  mutations: {
    setToken(state, token) {
      state.token = token
    }
  }
})

export default store

// 使用 store 中的 token

<template>
  <div>
    <p v-if="$store.state.token">您已登录</p>
    <p v-else>请登录</p>
  </div>
</template>

<script>
export default {
  mounted() {
    // 设置 token
    this.$store.commit('setToken', 'token-value')
  }
}
</script>

### 回答2：
在Vue中存储全局token可以通过多种方式实现。下面是其中两种常见的方法：

1. 使用VueX（状态管理）：
VueX是Vue.js的官方状态管理库，它可以存储全局的数据。我们可以将token存储在VueX的store中，然后在需要的地方随时获取和使用它。首先，在VueX的store中定义一个token变量，然后在登录成功后将token值保存到store中，之后在需要使用token的地方通过VueX来获取它。

示例代码如下所示：

在store.js文件中：

import Vue from 'vue';
import Vuex from 'vuex';

Vue.use(Vuex);

export default new Vuex.Store({
  state: {
    token: '' // 初始化token为空
  },
  mutations: {
    setToken(state, token) {
      state.token = token;
    }
  }
});

在登录成功后保存token的地方：

import store from './store';

// 登录成功后保存token到store中
store.commit('setToken', 'YOUR_TOKEN_VALUE');

在需要使用token的地方获取它：

import store from './store';

// 获取token
const token = store.state.token;

2. 使用LocalStorage（本地存储）：
另一种方法是将token存储在浏览器的localStorage中。localStorage是HTML5新增的web存储方案，能够将数据以键值对的方式保存在浏览器中，即使用户刷新页面或关闭浏览器，数据也会保留。

示例代码如下所示：

登录成功后保存token到localStorage中：

// 登录成功后保存token到localStorage中
localStorage.setItem('token', 'YOUR_TOKEN_VALUE');

在需要使用token的地方获取它：

// 获取token
const token = localStorage.getItem('token');

以上是在Vue中存储全局token的两种常见方式，开发人员可以根据具体需求选择适合的方法来存储和使用全局token。

### 回答3：
在vue中存储全局token有多种方式，下面是其中几种常见的方法：

1. 使用Vue的全局变量：可以将token作为Vue实例的一个全局变量来存储，这样在整个项目的任何地方都可以访问到token。在main.js文件中创建一个Vue实例并将token绑定到它的$data属性上，然后可以通过this.$data.token在各个组件中访问到token的值。

2. 使用Vuex状态管理：Vuex是Vue官方推荐的状态管理库，可以在其中定义一个全局的state，然后将token存储在这个全局state中。在需要使用token的组件中，通过在computed选项中定义一个getter来获取token的值。

3. 使用localStorage或sessionStorage：可以将token存储在浏览器的本地存储中，通过localStorage.setItem()方法将token存储到localStorage中，在需要使用token的地方通过localStorage.getItem()方法来获取token的值。这种方法的优点是在页面刷新后token仍然存在，缺点是如果用户清除了浏览器缓存，token也会被清除。

除了上述方法外，还可以使用cookie、IndexedDB等方式来存储全局token，具体选择哪一种方式取决于项目的需求和实际情况。无论选择哪种方式，都需要注意token的安全性，尽量避免在客户端存储敏感信息，可以使用HTTPS来加密通信，服务器端也需要进行相应的验证和保护。