Mock.js配合vuex进行登录获取token

新项目，后端数据还没准备好，没办法直接从后端获取接口数据，于是我利用Mock简单实现一下这个功能，以作为测试用。

首先，利用  cnpm install mockjs --save-dev  指令安装完mock后，在项目里创建文件夹mock，再创建index.js和userList.js（前者为mock服务文件，后者为模拟数据文件）
 

index.js中复制如下代码：

// 首先引入Mock
const Mock = require('mockjs');
 
// 设置拦截ajax请求的相应时间
Mock.setup({
    timeout: '200-600'
});
 
let configArray = [];
 
// 使用webpack的require.context()遍历所有mock文件
const files = require.context('.', true, /\.js$/);
files.keys().forEach((key) => {
    if (key === './index.js') return;
    configArray = configArray.concat(files(key).default);
});
 
// 注册所有的mock服务
configArray.forEach((item) => {
    for (let [path, target] of Object.entries(item)) {
        let protocol = path.split('|');
        Mock.mock(new RegExp('^' + protocol[1]), protocol[0], target);
    }
})

另外，需要在main.js中插入一段代码：require('../mock')

之后在userList中写入数据，首先写入get请求获取的数据：

import Mock from 'mockjs'; //导入mockjs

const userList = {
    //定义用户数据
    data: {
        total: 6,
        //前两个用户数据分别固定设为管理员和普通用户，为后续权限设置做准备，其他用户随机生成
        userinfo: [
            {
                username: 'admin',
                password: '123456',
                roles: 'admin',
                name: '张三',
                age: 23,
                job: '前端工程师',
                token: '000111222333444555666',
                id: '100'
            },
            {
                username: 'editor',
                password: '123456',
                roles: 'editor',
                name: '测试1',
                'age|20-30': 23,
                job: '前端工程师',
                token: '145145145123123123111',
                id: '101'
            },
            {
                username: '@word(3, 5)',
                password: '123456',
                roles: 'editor',
                name: '@cname',
                'age|20-30': 23,
                'job|1': ['前端工程师', '后端工程师', 'UI工程师', '需求工程师'],
                token: '@guid()',
                id: '102'
            },
            {
                username: 'uf100991',
                password: '1qaz!QAZ2wsx@WSX',
                roles: 'admin',
                name: '张三',
                age: 23,
                job: '前端工程师',
                token: '000111222333444555666',
                id: '103'
            }
        ],
        meta: {
            status: 200,
            message: 'success'
        }
    }
};

Mock.mock('/user', 'post', (req) => {
    //路径与请求方式
    console.log(req, 'req');
    console.log(JSON.parse(req.body), '==================22222=========');
    const user = JSON.parse(req.body); //将传递进来的数据保存
    console.log(user.data.username,"user.data.username")
    const username = user.data.username
    const password = user.data.password
    for (let i = 0; i < userList.data.userinfo.length; i++) {
        //判断userList中是否存在该用户并且用户密码是否正确
        if (username === userList.data.userinfo[i].username && password === userList.data.userinfo[i].password) {
            return {
                meta: {
                    msg: 'success',
                    status: 200
                },
                user: {
                    username: userList.data.userinfo[i].username,
                    roles: userList.data.userinfo[i].roles
                }
            };
        }
    }
    return {
        meta: {
            msg: 'error',
            status: 201
        }
    };
});

//定义请求方法与路径
export default {
    'get|/user': userList
};

在登录页某一按钮上定义methods以测试是否成功获取数据 ,这里搭配的vuex  此为登录页面

<template>
  <div class="login-wrap">
    <div class="ms-login">
      <div class="ms-title">后台管理系统</div>
      <el-form
        :model="ruleForm"
        status-icon
        :rules="rules"
        ref="ruleForm"
        label-width="0px"
        class="ms-content"
      >
        <el-form-item prop="username">
          <el-input v-model="ruleForm.username" placeholder="username">
            <el-button slot="prepend" icon="el-icon-lx-people"></el-button>
          </el-input>
        </el-form-item>
        <el-form-item prop="password">
          <el-input
            type="password"
            placeholder="password"
            v-model="ruleForm.password"
            autocomplete="off"
            @keyup.enter.native="submitForm('ruleForm')"
          >
            <el-button slot="prepend" icon="el-icon-lx-lock"></el-button>
          </el-input>
        </el-form-item>
        <div class="login-btn">
          <el-button type="primary" @click="submitForm('ruleForm')">登录</el-button>
        </div>
        <p class="login-tips">Tips : 用户名和密码随便填。</p>
      </el-form>
    </div>
  </div>
</template>

<script>
import Axios from 'axios';
export default {
  name: "Login",
  data() {
    var validateUser = (rule, value, callback) => {
      let reg = /^[A-Za-z0-9]+$/;
      //value就是输入的值
      if (value === "") {
        callback(new Error("请输入用户名"));
      } else {
        if (reg.test(value)) {
          callback(); //必须要callback 否则提交不了
        } else {
          callback(new Error("用户名是由数字和字母组成"));
        }
      }
    };
    var validatePass = (rule, value, callback) => {
      if (value === "") {
        callback(new Error("请输入密码"));
      } else {
        callback();
      }
    };
    return {
      ruleForm: {
        username: "",
        password: "",
      },
      rules: {
        username: [{ validator: validateUser, trigger: "blur" }],
        password: [{ validator: validatePass, trigger: "blur" }],
      },
    };
  },
  methods: {
    login() {},

    // 提交表单
    submitForm(formName) {
      JSON.stringify();
      this.$refs[formName].validate((valid) => {
        if (valid) {
          // let a = this.ruleForm;
          // console.log(a,"aaaaaaaaaaaaaaaa")
          // Axios.post('/user',{
          //   data:this.ruleForm
          // }).then((res) => {
          //   console.log(res,"res111111111111111111");
          //   let code = res.data.meta.status;
          //   if (code == "200") {
          //     this.$router.push("/home");
          //   }
          // });
          this.$store.dispatch("login", this.ruleForm);
        } else {
          console.log("error submit!!");
          return false;
        }
      });
    },
    // 重置表单
    resetForm(loginForm) {
      this.$refs[loginForm].resetFields();
    },
    // 获取验证码方法
    // getVerifyCodeImg() {
    //   /*获取验证码*/
    //   this.$axios.UploadFormFile.then((res) => {
    //     // 获取验证码key
    //     this.loginForm.codeToken = res.data.data.code;
    //     // 获取验证码图片
    //     this.codeImg = res.data.data.codeImg;
    //   });
    // },
  },
  // created() {
  //   // 页面渲染完成后执行获取验证码方法
  //   this.getVerifyCodeImg();
  // },
};
</script>

<style scoped>
.login-wrap {
  position: relative;
  width: 100%;
  height: 100%;
  background: url(../../assets/img/5d97a7ba_E905711_68c773e3.jpg) no-repeat;
  background-size: 100% 100%;
}

.ms-title {
  width: 100%;
  line-height: 50px;
  text-align: center;
  font-size: 20px;
  color: rgb(8, 8, 8);
  border-bottom: 1px solid #ddd;
}

.ms-login {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 350px;
  margin: -190px 0 0 -175px;
  border-radius: 5px;
  background: rgba(255, 255, 255, 0.7);
  overflow: hidden;
}

.ms-content {
  padding: 30px 30px;
}

.login-btn {
  text-align: center;
}

.login-btn button {
  width: 100%;
  height: 36px;
  margin-bottom: 10px;
}

.login-tips {
  font-size: 12px;
  line-height: 30px;
  color: rgba(255, 255, 255, 0.247);
}
</style>

登录按钮的methods暂时写为：

 submitForm(formName) {
      JSON.stringify();
      this.$refs[formName].validate((valid) => {
        if (valid) {
          // let a = this.ruleForm;
          // console.log(a,"aaaaaaaaaaaaaaaa")
          // Axios.post('/user',{
          //   data:this.ruleForm
          // }).then((res) => {
          //   console.log(res,"res111111111111111111");
          //   let code = res.data.meta.status;
          //   if (code == "200") {
          //     this.$router.push("/home");
          //   }
          // });
          this.$store.dispatch("login", this.ruleForm); //引用vuex里面的方法
        } else {
          console.log("error submit!!");
          return false;
        }
      });
    },

vuex里定义的方法 ,在actions里面

 //执行上下文 this.$store.dispatch('login_action')
    login(context, user) {
        // let user = {username:"zhangsan001",password:"admin123"}
        // console.log(user,"userInfo")
        console.log(user, '===================user');
        Axios.post('/user', {
            data: user
        }).then((res) => {
            console.log(res, '==============res');
            if (res.data.meta.status == 200) {
                // context.commit('SET_TOKEN', res.data.data.access_token);
                // console.log(context.commit("SET_TOKEN", res.data.data.access_token),"===================token==========")
                // context.commit("SET_NAME", res.data.data.loginname)
                // context.commit('SET_token_type', res.data.data.token_type);
                // setCookie('SET_token_type', res.data.data.token_type);
                // setCookie('SET_TOKEN', res.data.data.access_token);
                // localStorage.setItem('ms_username', res.data.data.token_type);
                Message({
                    message: '登录成功',
                    type: 'success',
                    duration: 2500
                });
                setTimeout(() => {
                    // this.$router.push('/');
                    router.push('/').catch(() => {});
                });
            } else {
                Message({
                    message: '用户名或密码错误',
                    type: 'error',
                    duration: 2500
                });
            }
        });
        // login(user).then((res) => {
        //     console.log(res, '==============res');
        //     if (res.status == 200) {
        //         context.commit('SET_TOKEN', res.data.data.access_token);
        //         // console.log(context.commit("SET_TOKEN", res.data.data.access_token),"===================token==========")
        //         // context.commit("SET_NAME", res.data.data.loginname)
        //         context.commit('SET_token_type', res.data.data.token_type);
        //         setCookie('SET_token_type', res.data.data.token_type);
        //         setCookie('SET_TOKEN', res.data.data.access_token);
        //         localStorage.setItem('ms_username', res.data.data.token_type);
        //         Message({
        //             message: '登录成功',
        //             type: 'success',
        //             duration: 2500
        //         });
        //         setTimeout(() => {

        //             // this.$router.push('/');
        //             router.push('/').catch(() => {});
        //         });
        //     } else {
        //         Message({
        //             message: '用户名或密码错误',
        //             type: 'error',
        //             duration: 2500
        //         });
        //     }
        // });
    },