常见登录认证 DEMO
欢迎来到阿八个人博客网站。本 阿八个人博客 网站提供最新的站长新闻,各种互联网资讯。 喜欢本站的朋友可以收藏本站,或者加QQ:我们大家一起来交流技术! URL链接:https://www.abboke.com/jsh/2019/0724/97659.html 1190000019853660sa">
⭐️ 更多前端技术和知识点,搜索订阅号 JS 菌
订阅
basic auth
basic auth 是最简单的一种,将用户名和密码通过 form 表单提交的方式在 Http 的 Authorization 字段设置好并发送给后端验证
要点:
- 不要通过 form 提交表单的默认方式发送请求,转而使用 fetch 或 ajax
- 客户端注意设置 Authorization 字段的值为 'Basic xxx',通过该 Http 字段传递用户名密码
- base64 的方法在客户端要注意兼容性 btoa ,建议使用现成的库如 'js-base64' 等,NodeJS 方面使用全局的 Buffer
- 服务端验证失败后,注意返回 401,但不用返回 'WWW-Authenticate: Basic realm="..."' 避免浏览器出现弹窗
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>AMD</title>
</head>
<body>
<script defer async="true" src="js/require.js" data-main="js/main"></script>
<!-- BasicAuth -->
<div>
<form id="form" action="">
<input type="text" name="username" id="username">
<input type="password" name="password" id="password">
<button id="login">login</button>
</form>
</div>
</body>
</html>
require.config({
baseUrl: 'js/libs',
paths: {
'zepto': 'zepto.min',
},
shim: {
'zepto': 'zepto',
}
});
define(['zepto'], function ($) {
let $form = $('#form')
$form.on('submit', (e) => {
e.preventDefault()
$.ajax({
// ajax 发送验证请求
type: 'POST',
url: '/login',
headers: {
'Content-Type': 'application/x-www-form-urlencoded',
'Authorization': 'Basic ' + btoa($('#username').val() + ':' + $('#password').val()),
// 通过 Authorization 传递 base64 编码后的用户名密码
},
success: function (data) {
console.dir(data) // 回调
}
})
})
});
(忽略上述 ajax 加 requirejs 古老的写法