后端登录接口

说明:

// 密码加密 和密码对比的中间件

# npm i  bcryptjs

// 后端验证表单数据的中间件

# npm i @escook/express-joi 

// 用这个包来生成 Token 字符串
const jwt = require('jsonwebtoken')

const bcrypt = require('bcryptjs')  在路由里面声明

bcrypt.compareSync(里面是要) 这个是密码 对比  因为数据库密码进行了二次加密

res.cc 封装的一个报错的函数的中间件 代码如下

//一定要在路由之前封装res.cc 函数
app.use((req,res,next)=>{
// status 默认为1 表示失败的情况
res.cc = function(err,status = 1){
res.send({
status,
message:err instanceof Error ? err.message : err
})
}
next()
})

使用

# 登录接口　　

exports.login = (req, res) => {
const userinfo = req.body
const sql = 'SELECT * FROM `数据表明` WHERE username=?'
db.query(sql,userinfo.username,(err,results)=>{
if(err){return res.cc()}
if (results.length !== 1) return res.cc('登录失败！')
// 拿着用户输入的密码,和数据库中存储的密码进行对比
const compareResult = bcrypt.compareSync(userinfo.password, results[0].password)
console.log(compareResult)
// 如果对比的结果等于 false, 则证明用户输入的密码错误
if (!compareResult) {
return res.cc('登录失败！')
}
//生成 JWT 的 Token 字符串
// 剔除完毕之后，user 中只保留了用户的 id, username, nickname, email 这四个属性的值
const user = { ...results[0], password: '', user_pic: '' }
// 生成 Token 字符串
const tokenStr = jwt.sign({ foo: 'bar' }, 'reaibiancheng');
res.send({
status: 0,
message: '登录成功！',
// 为了方便客户端使用 Token，在服务器端直接拼接上 Bearer 的前缀
token: 'Bearer ' + tokenStr,
})
})
}

 

前端登录实现 vue3

第一步需要验证用户输入的是否合法

如果合法我们把用户的用户名和密码传递给后端

第二步后端给我发来的token保存到本地 然后去到首页

第三步 根据路由全局守卫来判断本地是否有token 如果有，用户免登录 没有你就去登录

第四步 后端传过来的token会过期 过期了前端该如何处理？

　　第一种方式：

　　就是让用户重新登录，但是这种用户体验非常差

　　第二种方式：根据用户信息，自动给用户生成新的Token，减少登录次数。

　　刷新Token 的方式也有两种：

　　第一种：

　　　　在每个请求响应后进行拦截，如果发现请求失败（Token过期导致的）时，刷新Token再刷新请求接口。这种方式的优点是无需Token过期时间字段且无需判断时间，缺点在于多消耗一次请求。

　　第二种：

　　　　在每个请求发起前进行拦截，根据expires_in判断token是否过期，如果过期则会刷新后再继续请求接口。这个方法的优点是请求前拦截处理，能节省请求次数，缺点是后端需要提供Token过期时间字段，并且需要结合计算机本地时间判断，如果计算机时间被篡改，拦截就会失败。