这两天边学习vue边写了一个基于vue的token认证机制，以前是用的Angular js，现在改成vue，感觉写起来更容易理解，编码也更方便了。不多说，以下为截图加代码：（注意要自己去安装axios、vuex），我用的element-UI做的排版，这个可以根据实际需求自己去选择，也可以使用Bootstrap或者layyer-ui什么的。

五步即可完成，注意黑体字为主要内容！

1.目录结构

2. login.vue登录界面代码：

<template>
  <div id="login" align="center">
    <el-row :gutter="20">
      <el-col :span="7" :offset="8">
        <div class="grid-content bg-purple">
          <h1 align="center">VUE登录界面</h1><br>
        </div>
      </el-col>
      <el-col :span="6" :offset="8">
        <div class="grid-content bg-purple">

          <el-form :model="ruleForm2" status-icon :rules="rules2" ref="ruleForm2" label-width="100px"
                   class="demo-ruleForm">
            <el-form-item label="账号" prop="account">
              <el-input type="text" v-model="ruleForm2.account" autocomplete="off"></el-input>
            </el-form-item>
            <el-form-item label="密码" prop="pass">
              <el-input type="password" v-model="ruleForm2.pass" autocomplete="off"></el-input>
            </el-form-item>
            <el-form-item>
              <el-button type="primary" @click="submitForm('ruleForm2')">提交</el-button>
              <el-button @click="resetForm('ruleForm2')">重置</el-button>
              <el-button type="success" @click="register">注册</el-button>
            </el-form-item>
          </el-form>
        </div>
      </el-col>
    </el-row>
  </div>
</template>

<script>

import { mapMutations } from 'vuex';

export default {
  name: 'login',
  data () {
    var validatePass = (rule, value, callback) => {
      if (value === '') {
        callback(new Error('请输入密码'))
      } else {
        /*if (this.ruleForm2.pass !== '') {
          this.$refs.ruleForm2.validateField('pass')
        }*/
        callback()
      }
    }
    var validateAccount = (rule, value, callback) => {
      if (value === '') {
        callback(new Error('请输入账户名'))
      } else {
        /* if (this.ruleForm2.account !== '') {
           this.$refs.ruleForm2.validateField('account')
         }*/
        callback()
      }
    }
    return {
      userToken:"",
      ruleForm2: {
        pass: '',
        account: '',
      },
      rules2: {
        pass: [
          {validator: validatePass, trigger: 'blur'}
        ],
        account: [
          {validator: validateAccount, trigger: 'blur'}
        ]
      }
    }
  },
  methods: {
    ...mapMutations(['changeLogin']),
    submitForm (formName) {
      let _this=this;
      this.$refs[formName].validate((valid) => {
        if (valid) {
          this.$axios({
            method: 'post',
            url: '/jwt/login',
            data: {
              'username': this.ruleForm2.account,
              'password': this.ruleForm2.pass,
            },
            headers:{
              "Authorization":" "
            }
          }).then(res => {  //res是返回结果

            _this.userToken='Bearer '+res.data.token;
            console.log(this.userToken)//获取到的token
            _this.changeLogin({ Authorization: this.userToken });
            this.$router.push('/home');
            alert('登陆成功');
          }).catch(err => { //请求失败就会捕获报错信息
            console.log('服务器连接失败');
            console.log(err);
          })
        } else {
          console.log('用户信息错误')
          return false
        }
      })
    },
    resetForm (formName) {
      this.$refs[formName].resetFields()
    },
    register () {
      this.$router.push('/register')
    }
  },
}
</script>

3.router/index.js代码（路由）

import Vue from 'vue'
import Router from 'vue-router'
import login from '@/components/login'
import logout from '@/components/logout'
import Face from '@/components/content/face';
import Speak from '@/components/content/speak';
import Video from '@/components/content/video';
import register from '@/components/register';
import Home from '@/components/home';
Vue.use(Router)

export default new Router({
  routes: [
    //登录
    {
      path: '/',
      name: 'login',
      component: login
    },
    //注册
    {
      path:'/register',
      name: register,
      component: register
    },
   //主界面
    {
      path: '/home',
      name: 'home',
      meta: {
        requireAuth: true,  // 添加该字段，表示进入这个路由是需要登录的
      },
      component: Home,
      children:[
        {
          path:'/face',
          name:'face',
          component:Face
        },
        {
          path:'/speak',
          name:'speak',
          component:Speak
        },
        {
          path:'/video',
          name:'video',
          component:Video
        }
      ]
    },
    //退出
    {
      path: '/logout',
      name: 'logout',
      component: logout
    }

  ],

});

4.store/index.js（将从后端请求过来的token存储到本地）

import Vue from 'vue';
import Vuex from 'vuex';
Vue.use(Vuex);

export default new Vuex.Store({

  state: {
    // 存储token
    Authorization: localStorage.getItem('Authorization') ? localStorage.getItem('Authorization') : ''
  },
/* actions: {
   changeLogin(ctx,Authorization){
     ctx.commit('changeLogin',Authorization);
   }
 },*/
  mutations: {
    // 修改token，并将token存入localStorage
    changeLogin (state,user) {
     state.Authorization = user.Authorization;
     console.log("store/index.js---到这里了!");
      localStorage.setItem('Authorization', user.Authorization);
    }
  }
});

5.mian.js（判断异步请求是否需要加入token到header里）

import Vue from 'vue'
import App from './App'
import router from './router'
import ElementUI from 'element-ui'
import 'element-ui/lib/theme-chalk/index.css'
import locale from 'element-ui/lib/locale/lang/en'
import VideoPlayer from 'vue-video-player'
import axios from 'axios'
import store from './store'
require('video.js/dist/video-js.css')
require('vue-video-player/src/custom-theme.css')
Vue.config.productionTip = false
Vue.config.debug = true
Vue.use(ElementUI, {locale})
Vue.use(VideoPlayer)
Vue.prototype.$axios = axios

new Vue({
  el: '#app',
  router,
  store,
  components: {App},
  render: h => h(App),
  template: '<App/>'
})
//异步请求前在header里加入token
axios.interceptors.request.use(
  config => {
    if(config.url==='/jwt/login'||config.url==='/jwt'){  //如果是登录和注册操作，则不需要携带header里面的token
    }else{
      if (localStorage.getItem('Authorization')) {
        config.headers.Authorizatior = localStorage.getItem('Authorization');
      }
    }
    return config;
  },
  error => {
    return Promise.reject(error);
  });
//异步请求后，判断token是否过期
axios.interceptors.response.use(
  response =>{
    return response;
  },
  error => {
    if(error.response){
      switch (error.response.status) {
        case 401:
          localStorage.removeItem('Authorization');
          this.$router.push('/');
      }
    }
  }
)
//异步请求前判断请求的连接是否需要token
router.beforeEach((to, from, next) => {
  if (to.path === '/') {
    next();
  } else {
    let token = localStorage.getItem('Authorization');
    console.log("我是浏览器本地缓存的token: "+token);
    if (token === 'null' || token === '') {
      next('/');
    } else {
      next();
    }
  }
});

最后附上截图：