Only老K说-spa项目实现jwt验证码

实现思路

登录界面向后台请求验证码，后台就先调用随机函数生成验证码，并且根据验证码生成一张图片，以 base64 字符串的形式传到前台，这时我们还要生成verificationJwt令牌做为请求验证码客户端的区分。我们先将验证码信息存入redis。key是 verificationJwt令牌的值，value就是验证码了。并且将令牌放入到响应头。传给客户端。当客户端提交的时候将保持的verificationJwt令牌放入请求头带过来。后端根据前端传过来的 jwt令牌去redis中获取数据，将验证码拿到后和现有的验证码进行比较。看看是否相等

第一阶段，实现页面显示验证码

效果图

前端代码：vuex基础
state.js

export  default {
    resturantName:'飞哥餐馆',
    jwt:'',
  options: [],//存放tab页的容器
  activeIndex: '',//激活的tab页路由路径
  showName:'show',//tab页的标题
  role:"",//用来区分是否是因为左侧菜单被点击造成的路由路径发生改变，是：pass；不是：nopass
  userid:'',//用于存放登录人id
  verificationJwt:null //这是用来保存用户等登录验证码jwt身份识别的
}

getter.js(给verificationJwt提供get方法)

export  default {
    getResturantName:(state)=>{
      return state.resturantName;
},
  getJwt:(state)=>{
    return state.jwt;
  },
  getShowName:(state) => {
    return state.showName;
  },
  getOptions:(state) => {
    return state.options;
  },
  getRole:(state) => {
    return state.role;
  },
  getuserid(state){
      return state.userid;
  },
  getVerificationJwt:(state) =>{
    return state.verificationJwt;
  }
}

mutations.js(给VerificationJwt提供set方法)

export  default {
 setResturantName:(state,payload)=>{
   state.resturantName=payload.resturantName;
 },
  setJwt: (state, payload) => {
    state.jwt = payload.jwt;
  },
  // 添加tabs（data包含了路由路径跟tab页名字）
  add_tabs(state, data) {
    this.state.options.push(data);
  },
  // 删除tabs	（route是路由路径）
  delete_tabs(state, route) {
    let index = 0;
    for (let option of state.options) {
      if (option.route === route) {
        break;
      }
      index++;
    }
    this.state.options.splice(index, 1); //删除options里面下标为Index的一个数
  },
  // 设置当前激活的tab
  set_active_index(state, index) {
    this.state.activeIndex = index;
  },
  //设置tab页显示标题
  set_showName(state, name) {
    this.state.showName = name;
  },
  set_role(state, role) {
    this.state.role = role;
  },
  setuserid(state,payload){
    state.userid=payload.userid;
  },
  setVerificationJwt: (state, payload) => {
    state.verificationJwt = payload.verificationJwt;
  }
}

action.js

 'VERIFICATION': '/verificationCode', //获取验证码

http.js

// 请求拦截器
axios.interceptors.request.use(function(config) {
  //设置验证码jwt令牌
  let verificationJwt = window.vm.$store.getters.getVerificationJwt;
  if (verificationJwt) {
    config.headers['verificationJwt'] = verificationJwt;
  }

	var jwt = window.vm.$store.getters.getJwt;
	config.headers['jwt'] = jwt;
	return config;
}, function(error) {
	return Promise.reject(error);
});

// 响应拦截器
axios.interceptors.response.use(function(response) {
	// debugger;
  //保存验证码jwt令牌
  let verificationjwt = response.headers['verificationjwt'];
  if (verificationjwt) {
    window.vm.$store.commit('setVerificationJwt', {
      verificationJwt: verificationjwt
    });
  }

	var jwt = response.headers['jwt'];
	if(jwt){
		window.vm.$store.commit('setJwt',{jwt:jwt});
	}
	return response;
}, function(error) {
	return Promise.reject(error);
});

login.vue页面

<template>
    <div class="login-wrap">
      <div  class="demo">
      <el-form :model="ruleForm" label-width="100px" class="demo-ruleForm login-container">
        <h3 style="text-align: center;">用户登录</h3>
        <el-form-item label="用户名" prop="uname">
          <el-input type="uname" v-model="ruleForm.username" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="密码" prop="pwd">
          <el-input type="pwd" v-model="ruleForm.password" autocomplete="off" show-password></el-input>
        </el-form-item>
        <!--jwt-->
        <el-form-item label="验证码">
          <el-row>
            <el-col :span="16">
              <el-input type="text" v-model="ruleForm.verificationCode" placeholder="请输入验证码" autocomplete="off"></el-input>
            </el-col>
            <el-col :span="8">
              <img id="img" :src="ruleForm.verificationCodeSrc" width="116px" height="40px" @click="changeVerificationCode" >
            </el-col>
          </el-row>
        </el-form-item>

        <el-form-item>
          <el-row>
            <el-col :span="24">
              <div class="grid-content bg-purple-dark">
                <el-button type="primary" style="width: 100%;" @click="doSub">提交</el-button>
              </div>
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="12">
              <div class="grid-content bg-purple">
                <el-link type="success" @click="toReg">用户注册</el-link>
              </div>
            </el-col>
            <el-col :span="12">
              <div class="grid-content bg-purple-light">
                <el-link type="success">忘记密码</el-link>
              </div>
            </el-col>
          </el-row>
        </el-form-item>
      </el-form>
    </div>
    </div>
</template>

<script>
    export default {
      data() {
        return {
          ruleForm: {
            verificationCode:'',
            verificationCodeSrc:'',
            username: '',
            password: ''
          }
        };
      },methods:{
        //更新验证码  VERIFICATION
        changeVerificationCode(){
          let url = this.axios.urls.VERIFICATION;//获取验证码
          this.axios.post(url, {}).then(resp => {
            this.ruleForm.verificationCodeSrc = resp.data;
          }).catch(resp => {
            console.log(resp);
          });
        },
        toReg(){
          this.$router.push({
            path:'/Reg'
          });
        },
        doSub(){
          let url=this.axios.urls.SYSTEM_SSM_USER;
          console.log(url);
          this.axios.post(url, this.ruleForm).then((response)=> {
            // console.log(response);
            // console.log(response.data.data)//得到登录人的id
            //将登录的结果放去到vuex中 将这个Id放到Vu