【vue实战项目】通用管理系统：封装token操作和网络请求

1.概述

前文我们已经完成了登录页：

接下来我们要封装一下对token的操作和网络请求操作。之所以要封装这部分内容是因为token我们登陆后的所有请求都要携带，不可能每次都去重复的去手写：

token=localStorage.getToken('token')
this.axios.post('接口API',参数+token)
          .then(res=>{
            //业务逻辑
          })

这样每次都重复的去手写明显不具有复用性，一旦token的存取逻辑或者API地址变了，到处都要去改。所以将他们抽出来封装是很有必要的。本文的主要内容就是讲解如何去封装token的操作和网络请求。

2.封装对token的操作

对一个应用系统来说，当用户登陆过后，后续的操作都是要进行权限校验的，也就是在请求后端接口的时候都要带上token。所以我们要将token存起来，首先封装一个对token的操作集合。在utils下面新建一个setToken的js：

setToken的内容很简单就是用localStorage来对token进行缓存：

export function setToken(tokenKey,token){
    return localStorage.setItem(tokenKey,token)
}

export function getToken(tokenKey){
    return localStorage.getItem(tokenKey)
}

export function removeToken(tokenKey){
    return localStorage.removeItem(tokenKey)
}

由于setToken只在登录的时候才需要用到，所以这里没必要将它引入到main.js中去让全局都能调用到，直接在Login组件中引入，在Login组件中能被调用就行了。这里我们换一种方式来引入，import的时候除了用相对路径和绝对路径来导入外，还可以用@来导入，@会自动帮我们定位到资源所在路径

import {setItem} from '@/utils/setToken.js'

Login组件：

<script>
import {usernameAndPassWorldRule} from '../utils/validate.js'
//引入想要的操作token的方法
import {setToken} from '@/utils/setToken.js'
export default {
  data() {
    return {
      form: {
        username: "",
        password: "",
      },
      rules:{
        username:[{validator:usernameAndPassWorldRule,trigger:'blur'}],
        password:[{validator:usernameAndPassWorldRule,trigger:'blur'}]
      }
    };
  },
  methods:{
    login(form){
      this.$refs[form].validate((valid)=>{
        if(valid){
          console.log(this.form)
          this.$router.push('/home')
          this.axios.post('https://rapserver.sunmi.com/app/moc/340/login',this.form)
          .then(res=>{
            console.log(res)
            if(res.data.status===200){
              //使用引入的操作token的方法
              setToken('username',res.data.username)
              this.$message({message:res.data.message,type:'success'})
              this.$router.push('/home')
            }
          })
        }else{
          console.error(this.form)
        }
      })
    }
  }
};
</script>

ok，到了这一步我们已经完成了对token操作的封装，但是这就够了吗？很显然还不够的，至少还有两个地方还需要继续进行封装：

每次网络请求都要调用axios去写一大串地址，一旦地址变了，全局到处都要修改，很明显这里应该继续封装，免得搞得遍地都是。
后续的请求都要携带token，所以很显然还需要封装将token放到请求中去这个动作，免得搞得遍地都是。

这就是接下来我们要继续做的事儿——封装axios操作

3.封装axios

首先我们来解决前面提到的两点中的第一点：

每次网络请求都要调用axios去写一大串地址，一旦地址变了，全局到处都要修改，很明显这里应该继续封装，免得搞得遍地都是。

这个问题可以通过设置代理去解决，在vue.config.js中设置代理写好目标服务的URL前缀，顺便开启一下跨域：

module.exports = {  
    devServer:{
      open:true,
      host:'localhost',
      //配置代理
      proxy:{
        '/api':{
          //目标地址
          target:'http://127.0.0.1:8081/api/',
          //开启跨域
          changeOrigin:true,
          pathRewrite:{
            '^/api':''
          }
        }
      }
    }
  }

接下来解决第二个问题：

后续的请求都要携带token，所以很显然还需要封装将token放到请求中去这个动作，免得搞得遍地都是。

封装一个axios的工具js，service.js：

service.js里面通过拦截器的方式来拦截request和response，在请求发起时放入token，在响应回来时处理报错：

import axios from "axios";
import { getToken } from "@/utils/setToken.js";
import { Message } from "element-ui";
const service= axios.create({
    baseURL:'/api',
    timeout:3000
})

//添加请求拦截器
service.interceptors.request.use((config)=>{
    //在请求之前做些什么（获取并设置token）
    config.headers['token']=getToken('token')
    return config
},(error)=>{
    return Promise.reject(error)
})

//响应拦截器
service.interceptors.response.use((response)=>{
    //对响应数据做些什么
    let{status,message}=response.data
    if(status!=200){
        //用elementUI的message来提升错误或者告警
        Message({message:message||'error',type:'warning'})
    }
    return response
},(error)=>{
    return Promise.reject(error)
})

export default service

service.js是全局都要用到的，所以在main.js里引入：

import Vue from 'vue'
import App from './App.vue'
// import '../plugins/element.js'
import ElementUI from 'element-ui';
import 'element-ui/lib/theme-chalk/index.css';

import 'font-awesome/css/font-awesome.min.css'
// import axios from 'axios'
import router from './router'

import service from './utils/service';

Vue.use(ElementUI)
//挂载到原型，可以在全局使用
// Vue.prototype.axios=axios
Vue.prototype.service=service;
Vue.config.productionTip = false

new Vue({
  //挂在router
  router,
  render: h => h(App),
}).$mount('#app')

最后来改一下Login组件，完整的用上setToken.js和service.js：

<template>
  <div class="login">
    <el-card class="box-card">
      <div slot="header" class="clearfix">
        <span>通用后台管理系统</span>
      </div>
      <el-form
        label-width="80px"
        :model="form"
        ref="form"
        :rules="rules"
      >
        <el-form-item label="用户名" prop="username">
          <el-input v-model="form.username"></el-input>
        </el-form-item>
        <el-form-item label="密码" prop="password">
          <el-input type="password" v-model="form.password"></el-input>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="login('form')">登录</el-button>
        </el-form-item>
      </el-form>
    </el-card>
  </div>
</template>

<script>
import {usernameAndPassWorldRule} from '../utils/validate.js'
//引入想要的操作token的方法
import {setToken} from '@/utils/setToken.js'
export default {
  data() {
    return {
      form: {
        username: "",
        password: "",
      },
      rules:{
        username:[{validator:usernameAndPassWorldRule,trigger:'blur'}],
        password:[{validator:usernameAndPassWorldRule,trigger:'blur'}]
      }
    };
  },
  methods:{
    login(form){
      this.$refs[form].validate((valid)=>{
        if(valid){
          console.log(this.form)
          this.service.post('/login',this.form)
          .then(res=>{
            console.log(res.status)
            if(res.status===200){
              setToken('username',res.data.username)
              setToken('token',res.data.token)
              this.$router.push('/home')

            }
          })
        }else{
          console.error(this.form)
        }
      })
    }
  }
};
</script>

<style lang="less">
.login{
  width: 100%;
  height:100%;
  position: absolute;
  background: #409EFF;
  .box-card{
    width:450px;
    margin: 200px auto;
    .el-card__header{
      font-size: 30px;
    }
    .el-button{
      width: 100%;
    }

  }
}
</style>