实现登录，并且把token挂载到请求头

首先要在封装的axios拦截器当中配置

// 拦截器
instance.interceptors.request.use(config =>{
    // 部份接口需要拿到token
     let token = localStorage.getItem('token');

    token?config.headers.Authorization=token:null;

     return config;
},err=>{
    return Promise.reject(err)
});

回来创建一个vuex，省略vuex的安装过程…

在src目录下创建一个store文件夹，创建一个index的js文件，代码如下：

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

Vue.use(Vuex)

const store = new Vuex.Store({
    state:{
        token: localStorage.getItem('token') ? localStorage.getItem('token') : ''
    },
    mutations:{
        changeLogin(state,user){
        
            state.token = user.token;
            //回调函数传过来的token把他添加到浏览器本地存储
            localStorage.setItem('token',user.token)
        }
    }
})
export default store

弄好我们回去login组件

首先在data声明好表单接收的值：

loginfrom:{
            username: '',
            password:''
        },

接下来就是login函数：

login(){
        //避免this指向问题
        const _this = this
        //加载状态为true
        _this.loading = true
        //判断表单username，password不能为空
        if (this.loginfrom.username === '' || this.loginfrom.password === '') {
             this.$message.error('用户名或密码不能为空');
        } else {
            //调用封装好的axios的Getlogin接口，并且把表单数据loginfrom传送给服务器
            Getlogin(this.loginfrom).then(res=>{
                //判断返回值，1为有错，0为成功
               if(res.data.status === 1){
                     this.$alert('账户或密码错误', '提示', {
                        confirmButtonText: '确定',
                        callback: action => {
                           _this.loading = false
                        }
                    });
                }else if(res.data.status === 0){
                     _this.userToken = res.data.token;
                    //token保存到vuex
                    _this.changeLogin({token:_this.userToken})
                    //设置一个时间差，让loading持续发生0.3毫秒后跳转路由，并且弹出成功信息
                    setTimeout(() => {
                        _this.loading = false
                        _this.$router.push({path:'/home',replace:true});
                        _this.$message({message:res.data.message,type:'success'});
                        
                    }, 300);
                }
            })
        }
    },

实现上传用户头像

利用element UI的图片上传组件,可能会涉及一些跨域的问题，相对应解决请求头的问题即可

				<el-upload	
                    :action="uploadExcel()"
                    list-type="picture-card"
                    :on-preview="handlePictureCardPreview"
                    :headers="myHeaders"
                    :on-success="success"
                    :on-remove="handleRemove">
                    <i class="el-icon-plus"></i>
                    </el-upload>
                    <el-dialog :visible.sync="dialogVisible">
                    <img width="100%" :src="dialogImageUrl" alt="">
                </el-dialog>

js部分：

//把上传的图片转化成base64格式，file是图片数据
File(file) {
                var reader = new FileReader();
                reader.readAsDataURL(file); //调用自带方法进行转换
                reader.onload = (e) => {
                //e.target.result为转变好的base64格式
                      let data = 						      {'avatar':`${e.target.result}`,'id':this.isdata.id}
//postavatar为axios封装好的接口回调函数，并且把data作为参数传送过去，不懂可以参加封装axios文章
                      Postavatar(data).then( res=>{
                                console.log(res.data);
                            })
                        };
            },
             
     //on-remove	文件列表移除文件时的钩子	function(file, fileList)
     handleRemove(file, fileList) {
                console.log(file, fileList);
            },
            //on-preview	点击文件列表中已上传的文件时的钩子	function(file)
            handlePictureCardPreview(file) {
                this.dialogImageUrl = file.url;
                this.dialogVisible = true;
            },
            //on-success	文件上传成功时的钩子	function(response, file, fileList)
            
            success(response, file, fileList){
                this.File( file.raw)
                // console.log(file);
            },
            //图片上传的请求头与url
            uploadExcel() {
            
            let token = localStorage.getItem('token');
            
            this.myHeaders.Authorization = token;
            let url = 'http://127.0.0.1:3007/my/update/avatar';
            return url;
        },