vue全局路由守卫+token验证+node
内容导读
互联网集市收集整理的这篇技术教程文章主要介绍了vue全局路由守卫+token验证+node，小编现在分享给大家，供广大互联网技能从业者学习和参考。文章包含4877字，纯文字阅读大概需要7分钟。
内容图文
在后端安装jsonwebtoken npm i jsonwebtoken --save
在 login.js文件中引入 // 引入jwtconst jwt = require('jsonwebtoken'); // 定义秘钥 const secretKey = 'itsource'
生成token const token = jwt.sign(a, secretKey, {expiresIn: 60 * 60})
发送给前端
a==> 表示被加密的对象 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;
内容总结
以上是互联网集市为您收集整理的vue全局路由守卫+token验证+node全部内容，希望文章能够帮你解决vue全局路由守卫+token验证+node所遇到的程序开发问题。 如果觉得互联网集市技术教程内容还不错，欢迎将互联网集市网站推荐给程序员好友。
内容备注
版权声明：本文内容由互联网用户自发贡献，该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 gblab@vip.qq.com 举报，一经查实，本站将立刻删除。
内容手机端
扫描二维码推送至手机访问。
来源：【匿名】