登录界面搞定：前端传递、后台验证、畅享一键登录

你知道吗？在现代网络开发里，让用户能顺利登录可是个大问题！这篇文章就教你怎么用前端往服务器那传用户输的用户名和密码，然后靠服务器来验这个号儿对不对，对了的话，我们再把登陆的状态给保存在会话（session）里面。而且，咱们还得谈谈怎样做页面跳转，这样用户才能在登陆成功之后直接跳到他们想要去的地方。

1.用户登录功能概述

我们经常在网上遇见这个东西——用户登录功能，就是你给个用户名密码就能证明自己的身份，然后看自己的资料或者玩其他限制级的内容。这个东东前后台得配合起来才能用，前台主要干的就是接收到用户输入的信息，后台就会检查这些信息对不对，然后决定该怎么办。

当我们搞用户登陆那回事儿，得用AJAX把你填好的用户名、密码传送给后面的服务器，他们负责查验对不对。如果认证过了关，后面的服务器就用个会话记住你已经登录的事儿，这样等你下次再发请求，就能认出并确认你是不是真的登录了。

2.前端发送登录请求

前端咱们得把用户输的用户名和密码收起来交给后端去验真假。一般的做法是用AJAX（AsynchronousJavaScriptandXML）这个黑科技来发消息，这样网页就不会出现更新刷新的情况了，用户也能更舒心地用。下面这个就是个简单的例子：

javascript
//前端代码示例
functionlogin(){
要提取用户名，就直接用获取元素的方法，然后给它赋个变量叫username。
咱们弄个简短的密码：先在网页上找到那个叫做“密码”的框框，然后把里面的内容记下来。
//发送AJAX请求
我们用这个叫做xhr的东西，就是著名的XMLHttpRequest（跨文档资源交换）。
这个xhr要去"/login"那个地方传点东西，开个"POST"方式的通讯，而且动真格地打开。
只需在请求头中添上“Content-Type”，值设为“application/json”就行了。
const express = require('express')
const bodyParser = require('body-parser')
const session = require('express-session')
const app = express()
// 配置 body-parser，用于解析 post 请求体
app.use(bodyParser.urlencoded({
  extended: false
}))
// 配置 express-session，用于保存 session
app.use(session({
  secret: 'keyboard cat',
  cookie: { maxAge: 60000 }
}))
// 登录接口
app.post('/login', (req, res) => {
  const username = req.body.username
  const password = req.body.password
  // TODO: 验证用户名和密码是否正确，这里省略代码...
  // 设置 session
  req.session.username = username
  // 返回登录成功信息
  res.status(200).send('登录成功！')
})
app.listen(3000, () => {
  console.log('Server is running on port 3000')
})

你的代码有个小错误，得修改一下。这句是这么说的：

xhr.onreadystatechange=function(){

如果状态是4，且结果是200的话，就...

//登录成功后的处理逻辑

console.log("登录成功");

}
  
  
  


function login() {
  // 获取用户名和密码
  const username = document.getElementsByName('username')[0].value
  const password = document.getElementsByName('password')[0].value
  // 发送登录请求
  const xhr = new XMLHttpRequest()
  xhr.open('POST', '/login', true)
  xhr.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded')
  xhr.onreadystatechange = function() {
    if (xhr.readyState === 4 && xhr.status === 200) {
      alert(xhr.responseText)
    }
  }
  xhr.send(`username=${username}&password=${password}`)
}

};

把用户名和密码变成字符串存起来，这样就好。

xhr.send(data);

}

上面的代码就是用AJAX把你填的用户名跟密码传到后头去。那个”/login”，就是用来处理登录请求的地方。
3.后端验证用户信息
当我们在网上登录账号时，后端就要像个侦探似的检查我们输入的用户名和密码是否准确。他们就像是在混肴不在场证据中寻找破绽，与数据库里的宝贵资料进行对比，找出那个能证明我们身份的答案。如果找到了匹配的信息，后端就能允许我们进入网站，如果没有找到，那就得告诉我们登录失败了。下面就是一段用Node.js和Express框架编写的后端代码示例：
//后端代码示例
用这个express来建网站。
我们需要用到的是这个叫做bodyParser的东西，它在这里能帮上大忙。
咱们来聊聊这个”express-session”模块，它能让我们做什么？
constapp=express();
app.use(bodyParser.json());
app.use(session({
secret:”secret_key”,
resave:false,
// 需要登录才能访问的页面
app.get('/secret', (req, res) => {
  // 如果用户未登录，重定向到登录页
  if (!req.session.username) {
    res.redirect('/login.html')
    return
  }
  // 如果用户已登录，返回页面内容
  res.send('这是一篇需要登录才能访问的文章。')
})

saveUninitialized:true
}));
//用户登录接口
“登录页”:我们把/login设为app.post的地址，在这里我们会处理请求和响应。
我们直接用req.body里的username和password
//在这里进行用户名和密码的验证
//省略具体验证逻辑
//假设验证通过，设置session保存用户登录状态
直接设登录状态为真，搞定！
给req.session.username设个值叫username！
res.send(“登录成功”);
});
app.listen(3000,()=>{
服务器已在端口3000上启动~
说了这么多，就是用Express框架来搭建了一个简单的页面，这个页面就是用来处理登陆请求的”/login”这个路径。而且，当用户提交登陆请求时，我们就把他们的账号和密码丢给后台去验证，如果成功了，那就给用户发个会话码（session），这样就能记住你已经登陆过！
4.页面跳转实现
app.use(express.static('public'))
app.listen(3000, () => {
  console.log('Server is running on port 3000')
})

当你成功登入账户时，往往会被重新导向一个专门为您准备的界面，这样更能提高你的使用感受！在Node.js里，有一种叫做res.redirect()的方式来搞定这个事情。下面就是一份简短直观的例子，演示了如何做到这点哦：
//页面跳转实现示例代码
App的”/profile”这个地址，你可以这样来调：(req,res)=>{}
if(req.session.isLoggedIn){
res.send(“欢迎访问个人资料页面”);
}else{
res.redirect(“/login.html”);
}
通过这个代码，我们可以知道你是不是已经登录了。如果已经登陆过了，那就直接跳转到你的个人资料页；如果还没登录，那么它会帮你跳转到登录页面~
5.静态文件访问配置
Node.js里想要看静态的东西（比如说那些HTML、CSS、JS啥的文件）就得用那个express.static()的玩意儿。一般的规矩就是把这些文件丢到public目录然后再启用这个中间件让它们露出来。这里有个例子演示怎么操作：
//静态文件访问配置示例代码
直接用这个”express.static(“public”)”就能让你的网页能用了。
//启动应用
这么设置完了以后，你只需要去浏览”:3000/login.html”这个网址或者是”:3000/profile”就都能找到想要看的静默文件或者动态页面了喔！
6.实际开发中的改进和完善
这个例子只是为了展示基本原理，真实开发时你得根据实际需求改造下~比如加个密码加密防万一，或者搞个记住登录状态省去重复输入，或者设定个登录超时不至于让人等太久。还有就是页面跳转那块儿，也能按需改，比如说直接跳到别的页面，或者做点别的什么操作。
7.总结与展望
看过这篇文章之后，你就会明白怎么通过运用前后端技术搭建起用户登录界面，还包括页面跳转这些小细节。用户登录这玩意儿可是网页里最基本的功能，因为只有这样才能给每个人提供他们喜欢的东西，让他们用得更舒心。以后做网页设计时，咱们可以再研究研究怎么把这个功能做得更好，比如加些更高级的安全保护或者更人性化的操作方式，这样就能跟上时代的步伐！
你好好想想，最近用过的网页应用里，那用户登入方式靠谱吗？够方便？觉得哪儿还能搞得更好？别客气，把你的看法留在这儿~
			    						    						    						    					    		
			    					    				    					    			 原文链接：https://www.icz.com/technicalinformation/web/2024/04/15784.html，转载请注明出处~~~

登录界面搞定：前端传递、后台验证、畅享一键登录

评论0

在线客服

每日签到

夜间模式

返回顶部

登录界面搞定：前端传递、后台验证、畅享一键登录

猜你喜欢

评论0

在线客服

每日签到

夜间模式

返回顶部