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

<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 {
width: 30%;
margin: 40px auto 10px auto;
min-width: 300px;
}
</style>

// 全局路由守卫 拦截所有路由
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;