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 版权协议,转载请附上原文出处链接和本声明。
THE END
< <上一篇
下一篇>>