关于vue.js:axios封装结合token

9次阅读

共计 2516 个字符，预计需要花费 7 分钟才能阅读完成。

1. 开发环境 vue+axios
2. 电脑系统 windows10 专业版
3. 在开发的过程中, 咱们在做登录的时候会被要求应用 token 进行登录, 上面我来分享一下应用办法 (只是简略的封装), 心愿对你有所帮忙。
4. 在 src 目录下新建

4-1.chenhttp.js 代码如下:

import axios from 'axios'
import qs from "qs"

// 环境的切换
if (process.env.NODE_ENV === 'development') {
  // axios.defaults.baseURL = '/api';
  axios.defaults.baseURL = '/api';
} else if (process.env.NODE_ENV === 'debug') {axios.defaults.baseURL = ''} else if (process.env.NODE_ENV ==='production') {axios.defaults.baseURL = ''}
axios.defaults.timeout = 10000;
axios.defaults.headers.post['Content-Type'] = 'application/x-www-form-urlencoded;charset=UTF-8;multipart/form-data';

// 增加申请拦截器，在申请头中加 token
axios.interceptors.request.use(
  config => {if (localStorage.getItem('Cusertoken')) {config.headers.Ctoken = localStorage.getItem('Cusertoken');
    }
    return config;
  },
  error => {return Promise.reject(error);
  });

// 封装 axios 的 post 申请
const post = (url, params) => {return new Promise((resolve, reject) => {
  axios
   .post(url, qs.stringify(params))
   .then(response => {resolve(response.data);
   })
   .catch(error => {reject(error);
   });
 });
};

// 封装 axios 的 put 申请
const put = (url, params) => {return new Promise((resolve, reject) => {
  axios
   .put(url, params)
   .then(response => {resolve(response.data);
   })
   .catch(error => {reject(error);
   });
 });
};

// 封装 axios 的 delete 申请
const del = (url, params) => {return new Promise((resolve, reject) => {
  axios
   .delete(url, params)
   .then(response => {resolve(response.data);
   })
   .catch(error => {reject(error);
   });
 });
};
const get = (url, query) => {return axios.get(url, query);
};

const $axios = {
 post: post,
 get: get,
 put: put,
 delete: del
};

export default $axios;

4-2.chenapi.js 对立接口治理, 小伙伴们依据本人的需要进行批改, 代码如下:

import $axios from '@/chenhttp/chenhttp'
// chenl 是传的参数
export function login(chenl){return $axios.post('/login',chenl);
}

5. 在 store 文件夹下 index.js(就是 vuex) 中增加如下代码:

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

Vue.use(Vuex)

export default new Vuex.Store({
  state: {usertoken:localStorage.getItem("Cusertoken")?localStorage.getItem("Cusertoken"):"",
  },
  mutations: {changeLogin(state,user){
      state.usertoken=user;
      localStorage.setItem("Cusertoken",user);
    }
  },
  actions: { },
  modules: {}})

6. 在 router.js 中增加如下代码:

router.beforeEach((to, from, next) => {
  // 如果用户拜访的是登录页面 间接放行
  if (to.path === '/login') return next();
  // 从 localStorage 中失去 token
  const token = localStorage.getItem('Cusertoken');
  // 如果没有 token 值 那么就跳转到 '/login
  if (!token) return next('/login');
  // 如果有 token 则放行
  next();})

7. 在 login.js 中增加如下代码:

import {login} from '@/chenhttp/chenapi';

login(){
      enum Cobj{nn="90",}
      login(Cobj).then(res=>{console.log(res);
        console.log(res.CHtoken);
        (this as any).LoginObj.usertoken=res.CHtoken;
        (this as any).$store.commit("changeLogin",res.CHtoken);
        (this as any).$router.push('/index');
      })
    }