前端怎么做一个验证码和JWT,使用mockjs模拟后端

流程图

创建一个发起请求

创建一个方法

复制代码
    getCaptchaImg() {
      this.$axios.get('/captcha').then(res => {
        console.log(res);
        this.loginForm.token = res.data.data.token
        this.captchaImg = res.data.data.captchaImg
        console.log(this.captchaImg)
      })
    },

    captchaImg: "",

创建一个参数

先使页面刷星调用这个方法

复制代码
  created() {
    this.getCaptchaImg();

  },

要导入的图片,我这里加宽和高是因为,我的显示不出来,也不知道什么原因,望大佬指教

复制代码
          <el-input v-model="loginForm.code">
            <el-image slot="append" v-if="captchaImg" :src="captchaImg" style="width: 70px;height: 30px"
                      class="captchaImg"></el-image>
          </el-input>

使用mockjs

在main.js中加入

创建一个mock.js的文件

就可以模拟后端接口

复制代码
const Mock = require('mockjs')

const Random = Mock.Random
返回的结果
let Result = {
    code: 200,
    msg: '操作成功',
    data: null
};
这里和前端对应
Mock.mock('/captcha', 'get', () => {
    Result.data = {
        token: Random.string(32),
        这些方法可以在mockjs的官网上面去查询
        captchaImg: Random.dataImage('100x40', 'p7n5w'),
    }
    return Result;
});
Mock.mock('/login', 'post', () => {
    //无法往header中传入数据
    return Result;
});

结果

有点丑,见谅

现在我们要让所有页面都能有JWT

我们就要在store/index.js中进行一个传值

复制代码
import Vue from 'vue'
import Vuex from 'vuex'

Vue.use(Vuex)

export default new Vuex.Store({
  state: {
设置一个变量token
    token: '',
  },
  getters: {
  },
  mutations: {
设置一个方法,将token存入localStorage
      SET_TOKEN: (state, token) => {
          state.token = token
          localStorage.setItem("token", token)
      },

  },
  actions: {
  },
  modules: {
  }
})

写一个发请求的方法

复制代码
    submitForm(loginForm) {
      this.$refs[loginForm].validate((valid) => {
        if (valid) {
          this.$axios.post('/login', this.loginForm).then(res => {
            const jwt = res.headers['authorization']
            // 把jwt放到请求头中
            this.$store.commit('SET_TOKEN', jwt)
            //页面的跳转
            this.$router.push('/index')

          });
        } else {
          console.log('error submit!!');
          return false;
        }
      });
    },

mockjs中写接口

复制代码
Mock.mock('/login', 'post', () => {
    //无法往header中传入数据
    return Result;
});
相关推荐
江城开朗的豌豆1 分钟前
在写vue公用组件的时候,怎么提高可配置性
前端·javascript·vue.js
江城开朗的豌豆2 分钟前
Vue路由跳转的N种姿势,总有一种适合你!
前端·javascript·vue.js
江城开朗的豌豆2 分钟前
Vue路由玩法大揭秘:三种路由模式你Pick谁?
前端·javascript·vue.js
江城开朗的豌豆3 分钟前
Vue路由守卫全攻略:给页面访问装上'安检门'
前端·javascript·vue.js
小磊哥er10 分钟前
【前端工程化】前端组件模版构建那些事
前端
前端 贾公子11 分钟前
monorepo + Turborepo --- 开发应用程序
java·前端·javascript
江城开朗的豌豆15 分钟前
Vue路由传参避坑指南:params和query的那些猫腻
前端·javascript·vue.js
十里青山23 分钟前
超好用的vue图片预览插件更新啦,hevue-img-preview 7.0.0版本正式发布,支持vue2/vue3/移动/pc,增加缩略图、下载、自定义样式等
前端·javascript·vue.js
lichenyang45332 分钟前
css模块化以及rem布局
前端·javascript·css
小熊哥^--^34 分钟前
条件渲染 v-show与v-if
前端