vue全局路由守卫beforeEach+token验证+node

在后端安装jsonwebtoken         npm i jsonwebtoken --save

在 login.js文件中引入      // 引入jwtconst jwt = require('jsonwebtoken');                  // 定义秘钥    const secretKey = 'itsource'

生成token const token = jwt.sign(accountInfo,secretKey, {expiresIn: 60 * 60})

发送给前端
accountInfo==> 表示被加密的对象

secretKey===>被定义的秘钥

{expiresIn: 60 * 60} token的有效时间  单位是秒
将token发送给前端

前端代码

<template>
  <div>
    <el-form
      :model="ruleForm"
      status-icon
      :rules="rules"
      ref="ruleForm"
      label-width="100px"
      class="demo-ruleForm"
    >
      <el-form-item label="用户名" prop="user">
        <el-input v-model.number="ruleForm.user"></el-input>
      </el-form-item>

      <el-form-item label="密码" prop="pass">
        <el-input type="password" v-model="ruleForm.pass" autocomplete="off"></el-input>
      </el-form-item>

      <el-form-item label="确认密码" prop="checkPass">
        <el-input type="password" v-model="ruleForm.checkPass" autocomplete="off"></el-input>
      </el-form-item>

      <el-form-item>
        <el-button type="primary" @click="submitForm('ruleForm')">提交</el-button>
        <el-button @click="resetForm('ruleForm')">重置</el-button>
      </el-form-item>
    </el-form>
  </div>
</template>

<script>
// 引入qs
import qs from "qs";

export default {
  data() {
    var checkAge = (rule, value, callback) => {
      if (!value) {
        return callback(new Error("用户名不能为空"));
      }

      //它的意思是 当符合要求的条件的时候，就触发回调函数。这个回调的函数是显示成功的标识
      setTimeout(() => {
        callback();
      }, 500);
    };

    var validatePass = (rule, value, callback) => {
      if (value === "") {
        callback(new Error("请输入密码"));
      } else {
        if (this.ruleForm.checkPass !== "") {
          this.$refs.ruleForm.validateField("checkPass");
        }
        callback();
      }
    };

    var validatePass2 = (rule, value, callback) => {
      if (value === "") {
        callback(new Error("请再次输入密码"));
      } else if (value !== this.ruleForm.pass) {
        callback(new Error("两次输入密码不一致!"));
      } else {
        callback();
      }
    };
    return {
      // 存放用户的数据是 ruleForm  而不是data
      ruleForm: {
        pass: "",
        checkPass: "",
        user: ""
      },
      rules: {
        pass: [{ validator: validatePass, trigger: "blur" }],

        checkPass: [{ validator: validatePass2, trigger: "blur" }],

        user: [{ validator: checkAge, trigger: "blur" }]
      }
    };
  },

  methods: {
    submitForm(formName) {
      this.$refs[formName].validate(valid => {
        if (valid) {
          alert("submit!");
          //获取用户的数据哦
          //console.log(this.ruleForm.user, this.ruleForm.pass )

          //用一个对象 username是存放的名字哦  用的是一个爹对象将他们存起来
          let params = {
            username: this.ruleForm.user,
            password: this.ruleForm.pass
          };
          console.log(params);
          // 发送请求 把参数发给后端（把用户名和密码发给后端 验证是否存在这个账号）
          this.axios
            .post("http://127.0.0.1:666/login/checklogin", qs.stringify(params))
            .then(response => {
               // 接收后端返回的数据   token是token username用户名
              let {error_code, reason, token, username} = response.data;
              // 判断
              if (error_code === 0) {
                // 把token存在浏览器的本地存储中
                window.localStorage.setItem('token', token);
                // 把用户名存入本地存储
                window.localStorage.setItem('username', username);
                // 弹成功提示
                this.$message({
                  type: "success",
                  message: reason
                });
                // 跳转到后端首页
                this.$router.push("/");
              } else {
                // 弹失败提示
                this.$message.error(reason);
              }
            })
            .catch(err => {  
              console.log(err);
            });
        } else {
          // 否则就是false
          alert("前端验证失败 不能提交给后端！");
          return false;
        }
      });
    },
    resetForm(formName) {
      this.$refs[formName].resetFields();
    }
  }
};
</script>

<style lang="less" scoped>
.demo-ruleForm {
   30%;
  margin: 40px auto 10px auto;
  min- 300px;
}
</style>

　　在main.js中

// 全局路由守卫 拦截所有路由
router.beforeEach((to, from, next) => {
  // 获取token
  const token = window.localStorage.getItem('token');
  // 有token
  if (token) {
    // 直接放行
    next();
  } else {  // 否则是没有
    // 如果去的是登录页
    if (to.path === '/login') {
      // 直接放行
      next();
    } else {
      // 如果去的是其他页,跳转到登录页
      Message.error('请登录以后再操作！')
      // 跳转到登录页
      return next({ "path": "/login" })
    }
  }
})

  后盾login.js代码中
const express = require("express");
const router = express.Router();

// 引入连接数据库的模块
const connection = require("./connect");

// 引入jwt
const jwt = require('jsonwebtoken');
// 定义秘钥
const secretKey = 'itsource';


// 统一设置响应头 解决跨域问题
router.all("*", (req, res, next) => {
  // 设置响应头 解决跨域(目前最主流的方式)
  res.header("Access-Control-Allow-Origin", "*");
  next();
});

/* 
  验证用户名和密码是否正确的路由 
*/
router.post("/checklogin", (req, res) => {
  // 接收用户名和密码
  let { username, password } = req.body;
  // 构造sql（查询用户名和密码是否存在）
  const sqlStr = `select * from account where username='${username}' and password='${password}'`;
  // 执行sql语句
  connection.query(sqlStr, (err, data) => {
    if (err) throw err;
    // 判断
    if (!data.length) {
      // 如果不存在
      res.send({ error_code: 1, reason: "请检查用户名或密码!" });
    } else {
      // 存在
      // 当前登录账号数据
      const obj = data[0];
      // 转为字符串
      const objStr = JSON.stringify(obj);
      // 生成一个全新对象
      const accountInfo = JSON.parse(objStr);
      // 生成token
       const token = jwt.sign(accountInfo, secretKey, { expiresIn: 60 * 60 })
      res.send({
        'error_code': 0,
        'reason': '欢迎您!登录成功！',
        token,
        "username": accountInfo.username
      })
    }
  });     
});

module.exports = router;