node 第九天 使用前后端分离的方式实现cookie登录验证(关于withCredentials)

本文主要是介绍node 第九天 使用前后端分离的方式实现cookie登录验证(关于withCredentials),希望对大家解决编程问题提供一定的参考价值,需要的开发者们随着小编来一起学习吧!

  1. 前言
    和上一章(第八天就差了一个字), 要实现前后端分离的cookie登录验证, 需要结合第五天(服务端处理ajax跨域)和第八天(cookie登录逻辑)来完成
  2. 预备知识
    默认情况下,由 JavaScript 代码发起的跨源请求不会带来任何凭据(cookies 或者 HTTP 认证(HTTP authentication))。
    这对于 HTTP 请求来说并不常见。通常,对 http://site.com 的请求附带有该域的所有 cookie。但是由 JavaScript 方法发出的跨源请求是个例外。
    例如,fetch或xm发起请求l(‘http://another.com’) 不会发送任何 cookie,即使那些 (!) 属于 another.com 域的 cookie
    这是因为具有凭据的请求比没有凭据的请求要强大得多。如果被允许,它会使用它们的凭据授予 JavaScript 代表用户行为和访问敏感信息的全部权力。
    跨域进行cookie通信, 必须前后端双方明确表示同意。
  • 客户端XML发起的请求 必须设置 let ajax = new XMLHttpRequest(); ajax.withCredentials = true; fetch发起的请求设置方式有一点区别, 但逻辑是完全相同的。
  • 同时服务端除了处理常规跨域需要做的操作外还必须设置res.setHeader('Access-Control-Allow-Credentials', 'true');
  • 对于具有凭据的请求,禁止 Access-Control-Allow-Origin 使用星号 *。它必须有一个确切的源。这是另一项安全措施,以确保服务器真的知道它信任的是谁, 发出此请求的是谁。
  1. 前端, 简单模拟了一下单页面app的前端路由, 自己封装了一个简单ajax, 当然也可以使用axios, jQuery的$.ajax()等请求库
<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8" /><meta name="viewport" content="width=device-width, initial-scale=1.0" /><title>ajaxCookie</title></head><body><div id="login" style="display: none"><h1>请登录:</h1><input id="password" name="pw" type="password" /><input id="submit" type="submit" value="登录" /></div><div id="content" style="display: none"><h1>欢迎您~</h1></div></body><script>function myAjax({method = 'GET',url = '/',data = {},headers = {'content-type': 'application/x-www-form-urlencoded'},responseType = 'text',withCredentials = false,success = res => {console.log(res);},error = err => {console.log(err);}}) {let ajax = new XMLHttpRequest();ajax.withCredentials = withCredentials;ajax.open(method, url);for (const key in headers) {if (Object.hasOwnProperty.call(headers, key)) {ajax.setRequestHeader(key, headers[key]);}}ajax.responseType = responseType;ajax.send(data);ajax.onreadystatechange = () => {if (ajax.readyState === 4) {success(ajax.response);}};ajax.onerror = err => {error(err);};}</script><script>const loginEl = document.querySelector('#login');const submitEl = document.querySelector('#submit');const contentEl = document.querySelector('#content');//前端控制路由function toLogin() {loginEl.style.display = 'block';contentEl.style.display = 'none';}function toContent() {loginEl.style.display = 'none';contentEl.style.display = 'block';}//进入即发起请求(不携带密码, 携带cookie)myAjax({method: 'POST',url: 'http://127.0.0.1:3007/ajax',data: JSON.stringify({}),headers: {'content-type': 'application/json','x-token': 'x-token'},responseType: 'json',withCredentials: true,success: res => {console.log(res);if (res.code === 1) {this.toContent();} else {this.toLogin();}},err: err => {console.log(err);}});submitEl.onclick = () => {let pw = document.querySelector('#password').value;myAjax({method: 'POST',url: 'http://127.0.0.1:3007/login',data: JSON.stringify({pw: pw}),headers: {'content-type': 'application/json','x-token': 'x-token'},responseType: 'json',withCredentials: true,success: res => {console.log(res);if (res.code === 1) {this.toContent();} else {this.toLogin();}},err: err => {console.log(err);}});};</script>
</html>
  1. 后端, 前后端分离, 后端不处理页面逻辑. 只处理数据
const fs = require('fs');
const url = require('url');
const http = require('http');
const querystring = require('querystring');
const path = require('path');const server = http.createServer((req, res) => {res.setHeader('Access-Control-Allow-Origin', 'http://127.0.0.1:5500');res.setHeader('Access-Control-Allow-Headers', 'Content-Type, x-token');res.setHeader('Access-Control-Allow-Credentials', 'true');res.setHeader('Access-Control-Allow-Methods', 'POST, GET, PUT, OPTIONS, DELETE');res.setHeader('Access-Control-Max-Age', 1728000); //预请求缓存20天if (req.method === 'OPTIONS') {res.writeHead(200);res.end();} else {let cookie = req.headers.cookie;cookie = cookie.replace(/\s/g, '');const cookieInfo = querystring.parse(cookie, ';');if (cookieInfo.token === '10086') {res.writeHead(200, {'content-type': 'application/json'});res.end(JSON.stringify({ code: 1, data: { name: 'jian' }, msg: '登录成功' }));} else if (req.url === '/login') {req.on('data', chunk => {let { pw } = JSON.parse(chunk.toString('utf-8'));if (pw === '123456') {let date = new Date();date.setDate(date.getDate() + 1);let expires = date.toUTCString();res.writeHead(200, {'content-type': 'application/json','set-cookie': [`token=10086; Expires=${expires}; HttpOnly;`]});res.end(JSON.stringify({ code: 1, data: { name: 'jian' }, msg: '登录成功' }));} else {res.writeHead(200, {'content-type': 'application/json'});res.end(JSON.stringify({ code: 0, data: {}, msg: '密码错误' }));}});} else {res.writeHead(200, {'content-type': 'application/json'});res.end(JSON.stringify({ code: 0, data: {}, msg: '未登录' }));}}
});
server.listen(3007);
  1. 现在流行的后台技术体系, 单页面app + 前后端分离 逻辑原型就是这样的~fun :-)

这篇关于node 第九天 使用前后端分离的方式实现cookie登录验证(关于withCredentials)的文章就介绍到这儿,希望我们推荐的文章对编程师们有所帮助!



http://www.chinasem.cn/article/238317

相关文章

Python使用getopt处理命令行参数示例解析(最佳实践)

《Python使用getopt处理命令行参数示例解析(最佳实践)》getopt模块是Python标准库中一个简单但强大的命令行参数处理工具,它特别适合那些需要快速实现基本命令行参数解析的场景,或者需要... 目录为什么需要处理命令行参数?getopt模块基础实际应用示例与其他参数处理方式的比较常见问http

JAVA保证HashMap线程安全的几种方式

《JAVA保证HashMap线程安全的几种方式》HashMap是线程不安全的,这意味着如果多个线程并发地访问和修改同一个HashMap实例,可能会导致数据不一致和其他线程安全问题,本文主要介绍了JAV... 目录1. 使用 Collections.synchronizedMap2. 使用 Concurren

python实现svg图片转换为png和gif

《python实现svg图片转换为png和gif》这篇文章主要为大家详细介绍了python如何实现将svg图片格式转换为png和gif,文中的示例代码讲解详细,感兴趣的小伙伴可以跟随小编一起学习一下... 目录python实现svg图片转换为png和gifpython实现图片格式之间的相互转换延展:基于Py

Python利用ElementTree实现快速解析XML文件

《Python利用ElementTree实现快速解析XML文件》ElementTree是Python标准库的一部分,而且是Python标准库中用于解析和操作XML数据的模块,下面小编就来和大家详细讲讲... 目录一、XML文件解析到底有多重要二、ElementTree快速入门1. 加载XML的两种方式2.

C 语言中enum枚举的定义和使用小结

《C语言中enum枚举的定义和使用小结》在C语言里,enum(枚举)是一种用户自定义的数据类型,它能够让你创建一组具名的整数常量,下面我会从定义、使用、特性等方面详细介绍enum,感兴趣的朋友一起看... 目录1、引言2、基本定义3、定义枚举变量4、自定义枚举常量的值5、枚举与switch语句结合使用6、枚

Java的栈与队列实现代码解析

《Java的栈与队列实现代码解析》栈是常见的线性数据结构,栈的特点是以先进后出的形式,后进先出,先进后出,分为栈底和栈顶,栈应用于内存的分配,表达式求值,存储临时的数据和方法的调用等,本文给大家介绍J... 目录栈的概念(Stack)栈的实现代码队列(Queue)模拟实现队列(双链表实现)循环队列(循环数组

使用Python从PPT文档中提取图片和图片信息(如坐标、宽度和高度等)

《使用Python从PPT文档中提取图片和图片信息(如坐标、宽度和高度等)》PPT是一种高效的信息展示工具,广泛应用于教育、商务和设计等多个领域,PPT文档中常常包含丰富的图片内容,这些图片不仅提升了... 目录一、引言二、环境与工具三、python 提取PPT背景图片3.1 提取幻灯片背景图片3.2 提取

C++如何通过Qt反射机制实现数据类序列化

《C++如何通过Qt反射机制实现数据类序列化》在C++工程中经常需要使用数据类,并对数据类进行存储、打印、调试等操作,所以本文就来聊聊C++如何通过Qt反射机制实现数据类序列化吧... 目录设计预期设计思路代码实现使用方法在 C++ 工程中经常需要使用数据类,并对数据类进行存储、打印、调试等操作。由于数据类

Python实现图片分割的多种方法总结

《Python实现图片分割的多种方法总结》图片分割是图像处理中的一个重要任务,它的目标是将图像划分为多个区域或者对象,本文为大家整理了一些常用的分割方法,大家可以根据需求自行选择... 目录1. 基于传统图像处理的分割方法(1) 使用固定阈值分割图片(2) 自适应阈值分割(3) 使用图像边缘检测分割(4)

Android实现在线预览office文档的示例详解

《Android实现在线预览office文档的示例详解》在移动端展示在线Office文档(如Word、Excel、PPT)是一项常见需求,这篇文章为大家重点介绍了两种方案的实现方法,希望对大家有一定的... 目录一、项目概述二、相关技术知识三、实现思路3.1 方案一:WebView + Office Onl