在后端安装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 {
width: 30%;
margin: 40px auto 10px auto;
min-width: 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;