vue.js实现存储token,并带token访问

在 Vue.js 中实现存储 token 并带着 token 访问通常是在客户端进行的，因为浏览器的同源策略限制了服务器端直接操作 localStorage 或 sessionStorage。这里是一个简单的步骤：

1. **设置数据守卫**：
- 在 `src/api/index.js` 或者一个全局的 API 模块中，创建一个函数，用于检查 token 是否存在并设置 HTTP 请求头。例如：

   import axios from 'axios';
   
   export const setTokenHeader = (token) => {
     axios.defaults.headers.common['Authorization'] = `Bearer ${token}`;
   };

2. **登录成功时保存 token**：
- 用户登录成功后，将 token 存入本地存储（通常是 localStorage 或 sessionStorage），示例：

   import store from '@/store';
   
   const loginSuccess = async ({ user, token }) => {
     await store.dispatch('setUser', user);
     setTokenHeader(token);
   };

这里假设你在 Vuex Store 的 mutations 中有一个 `setUser`。

3. **全局访问拦截器**：
- 如果需要在每个请求之前检查 token，可以在 Vue 实例的生命周期钩子 `beforeCreate` 或 `mounted` 中添加一个请求拦截器，例如：

   // main.js 或其他入口文件
   import axios from 'axios';
   import { setTokenHeader } from '@/api';

   Vue.prototype.$http = axios.create({
     baseURL: process.env.BASE_API,
     headers: {
       Authorization: ''
     }
   });

   Vue.prototype.$http.interceptors.request.use((config) => {
     if (localStorage.getItem('token')) {
       config.headers.Authorization = `Bearer ${localStorage.getItem('token')}`;
     }
     return config;
   }, (error) => Promise.reject(error));

4. **退出登录时清除 token**：
- 在 `logout` 功能或 Vue Router 的 beforeEach 钩子中，移除 token 和清除 header：

   logout() {
     localStorage.removeItem('token');
     this.$http.defaults.headers.common.Authorization = '';
   }