1.开发环境 vue+axios+typescript
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';// 增加申请拦截器，在申请头中加tokenaxios.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');      })    }
成果如下:



8.本期的分享到了这里完结啦(只是简略的封装,前期还会更新),心愿对你有所帮忙,让咱们一起致力走向巅峰。