vue实现简单的登入功能

html部分

      
        
      

      
        
      

      
        
          
            
            
          
          
                
           
          
        
      

      
        安全登录
        
      

     
    

vuex部分

import Vue from 'vue'
import Vuex from 'vuex'
Vue.use(Vuex)
export default new Vuex.Store({
    state: {
        // 从session中获取token，没有则为空
        Authorization: localStorage.getItem('Authorization') ? 	  localStorage.getItem('Authorization') : '',
     
    },
    mutations: {
        // 修改token(该消息来自登录页面）
        changeToken(state, token) {
            state.Authorization = token;
            localStorage.setItem('Authorization', token)
        } 
    }, 
})

封装跳出提示信息alentMessage()函数  直接引用到需要用到的组件 不仅仅登入的时候可以用

//跳出提示信息的函数
//传入that为调用组件的this

 export function alentMessage(that,code,message){
      if(code==200){
        that.$message.success(message)
   //判断传过来的函数中是否有getcode()函数
      
      }
      else{
        that.$message.error(message);
        // 判断是否正确 不正确刷新验证码
                

        //判断传来的this中有没有得到验证码这个函数
//（其实就是判断传来的是不是登入或者其他需要验证码的组件。
//如果登录失败则调用函数刷新验证码）
        if(that.getcode){
          that.getcode();
        }
        
      }
 } 

axios的二次封装

创建http.js

import axios from 'axios'
import router from '../router/index'
function myAxios(config){
  //创建axios实例
    const service=axios.create({
        baseURL: 'http://10.128.193.156',//后端的域名
        withCredentials:false,
        // 配置请求头
        headers: {
            get: {
              'Content-Type': 'application/x-www-form-urlencoded;charset=utf-8',
              // 在开发中，一般还需要单点登录或者其他功能的通用请求头，可以一并配置进来
              
            },
            post: {
              'Content-Type': 'application/json;charset=utf-8'
              // 在开发中，一般还需要单点登录或者其他功能的通用请求头，可以一并配置进来
            },
            
            
      }, 
    })

   
   
//     //请求拦截
    service.interceptors.request.use(config=>{
      
      
      //....后续根据实际情况去配置
  
      return config
    },err =>Promise.reject(err))


     service.interceptors.response.use(
       res =>{
       
           return res.data
         
       },
       ()=>{
        
       alert('请求错误，请重试')
       }
      
     )
     

    return service(config)
 }
export default myAxios;

请求接口的封装

创建api.js

import myAxios from "./http";

 //登入
export  function login(paramsList){
    return myAxios({
        url:'/user/login',
        method:'post',
        data:paramsList
    })
}

 //验证码 
    export function  verificationCode(paramsList){
        return myAxios({
            responseType: 'arraybuffer',
            url:'/user/captcha',
            method:'get',
         
        })  
    }

最后在script里面引用上面封装好的代码

前端小白一个 有可以改进的地方希望大佬们可以指出！！！