Vue實現用戶登錄及token驗證

 寫博客不是爲了博眼球 而是爲了記筆記 

請勿複製全部代碼防止錯亂，這裏放源碼是爲了個人做筆記 

    //登錄
    login: params => {
        return API.POST('/accounts/login', qs.stringify(params))
    } 

     login.vue裏          

<template>
    <div class="loginpage">
        <div class="login-bg">
           <div class="title">
                <img src="../assets/loginlogo.png">
                <div>
                     <p>網絡安全某某某某系統</p>
                     <p class="english">NETWORK SECURITY XXXX SYSYTEM</p>   
                </div>
            </div> 
        <div class="logincenterimg">  
                <div class="login-form">  
                    <el-form :model="ruleForm2" :rules="rules2" ref="ruleForm2" label-position="left" label-width="0" class="demo-ruleForm login-container">
                        <strong class="logintitle" ref="title">用戶登錄</strong>
                        <el-form-item prop="username">
                            <el-input type="text" v-model="ruleForm2.username" auto-complete="off" placeholder="請輸入賬號">
                            </el-input>
                        </el-form-item>
                        <el-form-item prop="password"  style="margin-top:58px;">
                            <el-input type="password" v-model="ruleForm2.password" auto-complete="off" placeholder="請輸入密碼" @keyup.enter.native="loginSys">
                            </el-input>
                        </el-form-item>
                        <el-form-item prop="imageCode"  class="ipt-vcode">
                        <el-input type="text" v-model="ruleForm2.vcode" auto-complete="off" placeholder="請輸入驗證碼">
                            <i slot="prefix" class="el-input__icon prefix-vcode-icon"></i>
                        </el-input>
                        </el-form-item> 
                        <img :src="ruleForm2.vcodeImg" id="code" class="logincode" @click="changevCode"/> 
                        <!-- <el-form-item style="width:100%;"> -->
                            <el-button class="loginbtn" @click.prevent="loginSys" >登錄</el-button> 
                    </el-form>
                </div> 
            </div> 
        </div> 
    </div>
</template>

<script>
import API from '../axios/api_data.js'
export default {
    data () { 
        return { 
            ruleForm2: {
                username: '',
                password: ''
            },
            rules2: {
                username: [
                    { required: true, message: '請輸入用戶名', trigger: 'blur' }, 
                ],
                password: [
                    { required: true, message: '請輸入密碼', trigger: 'blur' }, 
                ]
                // ,
                // vcode:[
                //     {required: true, message: '請輸入驗證碼', trigger: 'blur'}
                // ]
            },
            // checked: true,
            errorbox:{
                errshow:false,
                errmsg:'',
            } 
        };
     
    },
    mounted:function(){
        // this.verificationCode();
    },
    created:function(){}, 
    methods: {
        loginSys: function (ev) {
          // 調用接口之前做表單驗證操作
          this.$refs['ruleForm2'].validate(valid => {
            if (valid) {
              // 表單驗證通過
              // 調用登錄接口
              let params = {
                username: this.ruleForm2.username,
                password: this.ruleForm2.password
                // ,imageCode:this.ruleForm2.imageCode
              }
              // 調用接口，提交用戶登錄信息
              API.login(params).then(res => {
                if (res.code === 0) {
                    alert(res.data.token)
                  // 存儲token
                  localStorage.setItem('mytoken', res.data.token)
                  // 登錄成功，跳轉到主頁
                  this.$router.push({ path: '/' })
                } else {
                  // 登錄失敗，提示一下用戶
                  this.$message({
                    message: res.message,
                    type: 'error'
                  })
                }
              })
            }
          })
        }
      }
}
</script>
 
<style lang="less">
*{
  padding: 0;margin: 0;
}
.loginpage{
    padding-top: 165px;
    width: 100%;
    height: 100%;
    min-height: 915px; 
    background: url(../assets/loginbg.png);
    .title{
        display:flex;
        justify-content: center;
        text-align:center; 
       font-size:34px;
       color:#00ffff;
       margin-bottom:65px;
       img{
          width:72px;
          height:72px;
          margin-right:30px;
       }
       .english{
          font-size:18px;
          color:#fff;
       }
    }
}
.logincenterimg{
    width: 750px;
    height: 600px;
    background: url(../assets/loginbg2.png) no-repeat center center;   
    margin:0px auto;
    position:relative;
    .login-form{
        position: absolute;
        top: 100px;
        left: 142px;
        text-align:center;
        .el-form-item{
            margin-left:100px;
        }
        .logintitle{
            display: inline-block;
            margin-bottom: 80px;
            font-size:24px;
            color:#5ea5d7;
        }
        input{
            border:none;
            background:#041c3b;
            margin-bottom: 15px;
            height: 46px;
            font-size:20px;
            color:#155a8c;
        }
        input::-webkit-input-placeholder {
            color: #2170a4;
        } 
    }
}
.loginbtn{
    width: 484px;
    height: 62px;
    background:#2c94ff;
    font-size:20px;
    color:#fff;
    border:none;
    border-radius:15px 0px 15px 0px;
}
.loginpage{
    width: 100%;
    height: 100%; 
}
.el-form-item{
    width:300px;
}
</style>

index.js裏 

import axios from 'axios';
import router from '../router' ;
import { Message } from 'element-ui';

let URL_PREFIX;

if (process.env.NODE_ENV === 'development') {
    //開發環境下的代理地址，解決本地跨域跨域，配置在config目錄下的index.js dev.proxyTable中
    URL_PREFIX = "/api"
} else {
    //生產環境下的地址
    URL_PREFIX = '/';
}
// 攔截器處理token
axios.interceptors.request.use(function (config) {
  let token = localStorage.getItem('mytoken')
  if (token) {
    config.headers['Authorization'] = token
  }
  return config
}, function (error) {
  return Promise.reject(error)
})

export const uploadInfo = () => {
  return {
    url: baseURL,
    token: localStorage.getItem('mytoken')
  }
}

// 登錄驗證
export const checkUser = params => {
  return axios.post('login', params).then(res => res.data)
}

// 退出登錄
export const logout = params => {
  return axios.get('logout', params).then(res => res.data)
}


const $ajax = axios.create({
    baseURL: URL_PREFIX, 
});

$ajax.interceptors.response.use(function (response) {
	// 對響應數據做點什麼   
    localStorage.setItem('is_expired',response.data.is_expired );  
	if(response.data.is_expired && !response.data.success){ //是否過期，如果過期，跳轉到/login 登錄頁面 
        router.push('/login');
        localStorage.removeItem('user');
        localStorage.removeItem('permidlist');  
	} 
    if(!response.data.success && response.data.msg){ //失敗並且有失敗信息
        Message.error(response.data.msg);
    }
    return response;
}, function (error) {
    if(error && error.response){
        switch(error.response.status){
            case 400: 
                Message.error('錯誤請求');
                break;
            case 401: 
                Message.error('訪問被拒絕');
                break;
            case 403: 
                Message.error('禁止訪問');
                break;
            case 404: 
                //Message.error('請求錯誤，未找到資源');
                router.push('/404');
                break;
            case 408: 
                Message.error('請求超時');
                break;
            case 500: 
                //Message.error('服務器端出錯');
                router.push('/500');
                break;
            case 502: 
                Message.error('網絡錯誤');
                break;
            case 503: 
                Message.error('服務不可用');
                break;
            case 504: 
                Message.error('網關超時');
                break;
            default:
                Message.error('連接錯誤'+error.response.status);

        } 
    }else{
        Message.error('網絡出現問題，請稍後再試');
    }
    

	return Promise.reject(error);
});
// 通用方法
export const POST = (url, params) => {
  return $ajax.post(`${url}/`, params).then(res => res.data)
}
export const GET = (url, params) => {
  return $ajax.get(`${url}/`, {params: params}).then(res => res.data)
}
export default $ajax

main.js裏 

// The Vue build version to load with the `import` command
// (runtime-only or standalone) has been set in webpack.base.conf with an alias.
import Vue from 'vue'
import Vuex from 'vuex'
import App from './App'
import router from './router' 
import store from './store/store'
import $ajax from './axios/index'
import qs from 'qs'
import './assets/theme/index.css'
import './assets/theme/common.css'
import ElementUI from 'element-ui'

import Global from './global/global'


import './assets/icon/iconfont.css'

Vue.use(Vuex)

Vue.use(ElementUI)

// 全局導航過濾(其實就是攔截路由請求)
router.beforeEach((to, from, next) => {
  let user = localStorage.getItem('mytoken')
  if (user) {
    // 允許通過，按照正常的邏輯向下跳轉
    next()
  } else {
    // 登陸的路由是不需要驗證權限的
    if (to.path !== '/login') {
      // 如果沒有權限，從新跳轉到登錄頁面
      next({path: '/login'})
    } else {
      // 是登錄頁，直接跳轉到登錄頁面
      next()
    }
  }
})
Vue.prototype.qs = qs

Vue.prototype.$ajax = $ajax

Vue.prototype.store = store

Vue.prototype.global = Global

Vue.config.productionTip = false
/* eslint-disable no-new */
new Vue({
  el: '#app',
  router,
  store,
  components: { App },
  template: '<App/>'
 
});