本篇文章适合有node基础的同学们哦！
我用到的技术
- express（基于node的后端）
- json-server
创建项目
express --view=ejs nodeApp下载依赖
npm i测试能否成功访问
开启本地服务器：
node ./bin/www创建一个登录界面在views目录下（ejs）
代码如下
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<h1>卖座后台登录界面：</h1>
<div>
<span>用户:</span>
<input type="text" placeholder="请输入用户名" id="username">
</div>
<div>
<span>密码:</span>
<input type="password" placeholder="请输入密码" id="mypassword">
</div>
<div><button id="btn">login</button></div>
<script>
btn.onclick = function () {
// console.log(username.value,mypassword.value)
fetch("http://localhost:3001/login", {
method: 'POST',
headers: { "content-type": "application/json" },
body: JSON.stringify({
username: username.value,
password: mypassword.value
})
}).then(res => res.json()).then(res => {
if(res.ok===1){
alert("登录成功")
location.href = 'http://localhost:3001/index'
}else{
alert('登录失败')
}
})
}
</script>
</body>
</html>创建一个登录成功后的跳转界面（ejs）
创建完后记得写好接口，渲染这个ejs页面
后台路由代码
这里使用fetch一直报错，我不知道什么原因，后面使用了axios(好用，爱用，哈哈哈哈！！)
下载json-server
npm i -g json-server开启json-server服务
这里要注意:express项目与json-server的默认端口都是3000,建议修改express的端口（容易改），在bin目录下修改www即可
在你的express项目下创建user.json
user.json的内容如下：
{
"users":[
{
"username":"admin",
"password":"123",
"mony":"567"
},
{
"username":"test",
"password":"1234",
"mony":"11"
}
]
}执行
json-server --watch user.json这样你的user.json这个文件就在json-server的监听下了
下载axios(一种请求方式)
npm i axiosvar express = require('express');
var axios = require('axios')
var router = express.Router();
/* GET home page. */
router.get('/', function(req, res, next) {
res.render('login');
});
router.post('/login',function(req, res, next) {
let dataLength
axios.get("http://localhost:3000/users").then(re=>{
dataLength=re.data.length
for(var i=0;i<dataLength;i++){
if(re.data[i].username==req.body.username && re.data[i].password==req.body.password){
res.send({ok:1})
return
}
}
if(i===dataLength){
res.send({ok:0})
}
})
})
module.exports = router;
这里作者只是讲一下登录鉴权的一个过程，就没有创建数据库了，
正常的应该在路由中去获取数据库的内容，验证前端提交用户名与密码是否正确,
作者这里就使用json-server模拟了一下后台数据
到这里最简单的一个登录鉴权就已经写完了
但是现在好像不登录直接输入后台url地址也能访问，现在就要进入本篇文章的主题了，
使用Express中间件 Express-session
安装express-session中间件
npm i express-session配置app.js文件
导入express-session
const session = require('express-session')配置session（记得放在express的路由之前）
// 设置session
app.use(session({
secret: 'asdjlzxco', //秘钥
resave: true, //重新设置session后，就会重新开始计算过期时间
saveUninitialized: true, //一开始访问就会生成一个无效的cookie,
cookie: { secure: false, maxAge: 1000*60*60 },
name: 'maiZuo'
}))修改post请求的路由(设置req.session.username的值)
router.post('/',function(req, res, next) {
let dataLength
axios.get("http://localhost:3000/users").then(re=>{
dataLength=re.data.length
for(var i=0;i<dataLength;i++){
if(re.data[i].username==req.body.username && re.data[i].password==req.body.password){
req.session.username = re.data[i].username
res.send({ok:1})
return
}
}
if(i===dataLength){
res.send({ok:0})
}
})
})创建中间件对接口进行拦截
app.use((req,res,next)=>{
// 解决重定向次数过多，只要是关于登录有关的接口就放行
if(req.url.includes('login')){
next()
return
}
if(req.session.username){
//重新设置session，刷新过期时间
req.session.mydate = Date.now()
next()
}else{
// 重定向到登录界面
res.redirect('http://localhost:3001/login')
}
})整个app.js代码
var createError = require('http-errors');
var express = require('express');
const session = require('express-session')
var path = require('path');
var cookieParser = require('cookie-parser');
var logger = require('morgan');
var loginRouter = require('./routes/login');
var usersRouter = require('./routes/users');
var app = express();
// view engine setup
app.set('views', path.join(__dirname, 'views'));
app.set('view engine', 'ejs');
app.use(logger('dev'));
app.use(express.json());
app.use(express.urlencoded({ extended: false }));
app.use(cookieParser());
app.use(express.static(path.join(__dirname, 'public')));
// 设置session
app.use(session({
secret: 'asdjlzxco', //秘钥
resave: true, //重新设置session后，就会重新开始计算过期时间
saveUninitialized: true, //一开始访问就会生成一个无效的cookie,
cookie: { secure: false, maxAge: 1000*60*60 },
name: 'maiZuo'
}))
// 中间件对接口进行拦截
app.use((req,res,next)=>{
// 解决重定向次数过多，只要是关于登录有关的接口就放行
if(req.url.includes('login')){
next()
return
}
if(req.session.username){
//重新设置session，刷新过期时间
req.session.mydate = Date.now()
next()
}else{
// 重定向到登录界面
res.redirect('http://localhost:3001/login')
}
})
app.use('/login', loginRouter); //登录界面的路由
app.use('/', usersRouter); //登录成功后界面的路由
// catch 404 and forward to error handler
app.use(function(req, res, next) {
next(createError(404));
});
// error handler
app.use(function(err, req, res, next) {
// set locals, only providing error in development
res.locals.message = err.message;
res.locals.error = req.app.get('env') === 'development' ? err : {};
// render the error page
res.status(err.status || 500);
res.render('error');
});
module.exports = app;
到这一步，伙伴们你们已经实现了一个登录鉴权功能了，是不是很简单呢！！
登出功能的实现
在登录成功后的界面写一个退出按钮
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<h1>卖座后台</h1>
<div><button id="btn">退出登录</button></div>
<script>
btn.onclick=function(){
fetch('http://localhost:3001/exit').then(res=>res.json()).then(res=>{
if(res.ok===1){
location.href = './login'
}else{
alert("退出失败")
}
})
}
</script>
</body>
</html>后台退出的接口
router.get('/exit', function(req, res, next) {
req.session.destroy()
res.send({ok:1})
});总结
呼！终于写完了，这种方法的弊端还是很多的，一旦登录用户一多，后台内存不断变大，容易导致
后台直接奔溃，当然session可以存数据库，但是流量一大对数据库的压力也不小，所以也有另外一种
登录鉴权方案——————JWT方案