在后端安装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;
