vue实现接口加token+vuex刷新丢失问题

第一步vuex
要想实现接口添加token、首先要存起来，这里我是用vuex来存储token和其他用户信息。如果不想使用也可以使用localStorage和sessionStorage来进行储存。因为vuex中存储的数据刷新页面后就会丢失，所以也需要使用localStorage和sessionStorage进行配合。这里的Storage就是sessionStorage，只是进行封装了。为什么这么写呢？因为使用mutations方法赋值后，state的值虽然会变，但是刷新后又会变为初始，但是他的初始值是从localStorage和sessionStorage获取，而localStorage和sessionStorage的值在mutations方法中也一起赋值了，所以刷新后，就算值变为初始值，也不会丢失。

import {Storage} from '../util/zmxTool.js'
import Vue from 'vue';
import Vuex from 'vuex';
Vue.use(Vuex);

export default new Vuex.Store({
  state: {
    // 存储token
    Authorization: Storage.get('Authorization') ? Storage.get('Authorization') : '',
    // 用户信息
    userInfo: Storage.get('userInfo') ? Storage.get('userInfo') : '',
    // 菜单数据
    menuData: Storage.get('menus') ? Storage.get('menus') : '',
  },
  /* actions: {
     changeLogin(ctx,Authorization){
       ctx.commit('changeLogin',Authorization);
     }
   },*/
  mutations: {
    // 修改token，并将token存入localStorage
    changeToken (state,user) {
      state.Authorization = user
      Storage.set('Authorization', user);
    },
    // 修改token，并将token存入localStorage
    changeUser(state,user){
      state.userInfo = user;
      Storage.set('userInfo', user);
    },
    changeMenus(state,user){
      state.menuData = user;
      Storage.set('menus', user);
    }
  }
});

数据的存取
这里使用vuex的辅助函数

...mapMutations(['changeToken','changeUser']),
          // 登录
          login(){
            login({
              password:this.input2,
              userName:this.input
            }).then(res=>{
              console.log(res);
              if (res.code==200){
                let redirect = decodeURIComponent(this.$route.query.redirect || '/index');
                this.$router.push({ path: redirect })
                //获取token
                this.changeToken(res.token)
               // 获取用户信息
                this.changeUser(res.data)
              }
            })
          }

第二步 接口封装
添加token就是在这里添加。在请求拦截器里添加config.headers.satoken = store.state.Authorization，这里store.state.Authorization就是store里存储的token值。

import axios from "axios";
import { Message } from "element-ui";
import store from '../store'
import router from '../router'

console.log(localStorage.getItem("api"));
//使用create方法创建axios实例
let Service = axios.create({
  timeout: 10000, // 请求超时时间
  baseURL:localStorage.getItem('api'),//默认路径，这里也可以使用env来判断环境,此处在static/config/config.js定义
})
// 添加请求拦截器
Service.interceptors.request.use(config => {
  // 添加token
  if (store.state.Authorization) {
    config.headers.satoken = store.state.Authorization
  }
  return config
})
// 添加响应拦截器
Service.interceptors.response.use(response => {
  if(response.data.code === 401) {
    // 401 说明 token 验证失败
    // 可以直接跳转到登录页面，重新登录获取 token
    router.push( '/login')
    Message.info('身份验证已失效，请重新登陆')
  } else if (response.data.code === 500) {
    // 服务器错误
    // do something
    Message.info(response.data.msg)
    return Promise.reject(response.data)
  }
  return response.data
}, error => {
  if(error.message.includes('timeout')){
    Message.info('服务器繁忙')
  }
  if(error.response.status === 401) {
    // 401 说明 token 验证失败
    // 可以直接跳转到登录页面，重新登录获取 token
    location.href = '/login'
  } else if (error.response.status === 500) {
    // 服务器错误
    // do something
    return Promise.reject(error.response.data)
  }
  const msg = error.Message !== undefined ? error.Message : ''
  Message({message: '网络错误' + msg, type: 'error', duration: 3 * 1000})
  // 返回 response 里的错误信息
  return Promise.reject(error.response.data)
})
export { Service };

第三步、使用封装接口
这样调用接口，你添加token的才会起作用。

import { Service } from "@/api/Service.js";

export const cloud_Info = params => {
  return Service({
    url:"/api/cloud/get/count/Info",
    method: "post",
    data: params,
  });
};

引入

import {cloud_Info} from '../../api/cloudResource.js'

使用

cloud_Info().then(res=>{
        
      })

如有更好的方法，还请告诉我哦