vue项目中使用nodejs实现登录
用vue,nodejs,mysql做的一个登录的页面
代码放完的话有点麻烦,只放实现功能的代码把。
vue部分:
<script>
export default {
data() {
return{
loginForm:{
username:'',
password:'',
},//下面两行是vuelogo的不用理会
circleUrl: require('../assets/logo.png'),
size:100
}
},
methods:{
submit(){
if(this.loginForm.username==''||this.loginForm.password==''){
this.$message.warning("请输入账号或密码");
return;
}
//用axios向nodejs搭建的后台服务器发送请求
this.$axios.post('/login',this.loginForm).then((res)=>{
if(res.data.loginstatus==true&&res.data.token){//判断服务器返回的验证
window.localStorage.setItem('token',res.data.token);//将返回的token上传到浏览器
this.$router.push('/home');//跳转到下个页面
}
else this.$message.error("账号或密码错误");
},(err)=>{console.log(err)})
}
}
}
</script>
服务器端代码:
const db = require('./db');
const express = require('express');
const mysql = require('mysql');
const jwt = require('jsonwebtoken');
const cors = require('cors');
var app = express();
app.use(cors());
app.get('/',(req,res)=>{
res.send();
})
app.post('/login',(req,res)=>{
var token,username,password,loginstatus=false;
req.on('data',(data)=>{
var user=JSON.parse(data.toString());//将data转换成字符串不然会乱码,再转换成json对象
username=user.username;
password=user.password;
})
db.getConnection((err,connection)=>{
if(err)
res.send(err);
else
{
var sql = 'SELECT * FROM user where username=?';
connection.query(sql, [username],(err, result) => {
if(err)
res.send(err);
else if(result.length!=0)//result.length!=0防止没有username报错
{
if(password==result[0].password){
loginstatus=true;//登录验证成功
token = jwt.sign({
username:username//加密的对象
},"user");//user为加密算法
}
}
res.send({loginstatus,token});
})
}
})
})
app.listen(3000);
连接mysql可以看这里https://blog.csdn.net/lyy18719172450/article/details/115220955?spm=1001.2014.3001.5501
在index.js中设置路由导航守卫,防止把token删掉了刷新后还停留在登录后的页面
router.beforeEach((to,from,next)=>{//路由导航守卫
if(to.path === '/login')
return next();
//如果没有token值返回登录界面
const token = window.localStorage.getItem('token');
if(!token)
return next('/login');
return next();
})
做的不是很好,有哪里要改进希望指出
版权声明:本文为lyy18719172450原创文章,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接和本声明。