用js写一个登录功能并且由js判断是否登录 无需后端服务 |
您所在的位置：网站首页 › html登陆判断 › 用js写一个登录功能并且由js判断是否登录 无需后端服务 |
用js写一个登录功能并且由js判断是否登录 无需后端服务
|
用js写一个登录功能并且由js判断是否登录 无需后端服务
前言解决思路代码主要代码完整代码
成果
前言
最近在使用码云的giteepages功能在码云上放了几个网页，在实现基本的展现之后，此时博主在想怎么可以再不调用后端接口的方式进行安全验证呢，为了将白嫖进行到底，还真有一个小方法，一起来看看吧。 其实整体思路很简单，灵感是来自于当时使用jwt做安全验证的一个小demo，主要就是要利用一个浏览器附带的一个本地存储器—localStorage，这个东西主要起的功能就是在我们验证密码正确之后，将登陆成功的信息存储在本地，方便我们在访问其他页面时可以通过验证localStorage中存储的信息进行验证是否登录，整体思路就是这样，来看看怎么解决吧。 代码 主要代码验证密码是否正确 因为不需要调用后端程序，这里我们只能采用固定密码的方式，当然如果觉得太明显了点，可以加密一下，这里大家有兴趣可以搞一下 function isRight(pwd) { if (pwd == "123") { return true } else { return false; } }登录功能 $('#login').click(function() { pwd = $('#pwd').val() flag = isRight(pwd) if (flag) { //这里存储验证成功信息，为了后面访问权限页面的验证做准备 localStorage.setItem("pwd", pwd) //登陆成功就跳转页面 window.location.href = 'test.html' } else { alert("密码错误，请重试") } });验证是否登录 //在localStorage中拿出我们刚刚存储的信息进行验证 pwd = localStorage.getItem("pwd") if (pwd == null || !isEasy(pwd)) { window.location.href = 'login.html' } 完整代码登陆界面 DOCTYPE html> 登录 登录 退出 $('#login').click(function() { pwd = $('#pwd').val() flag = isRight(pwd) if (flag) { localStorage.setItem("pwd", pwd) window.location.href = 'test.html' } else { alert("密码错误，请重试") } }); $('#logout').click(function() { localStorage.removeItem("pwd") })需要权限页面 DOCTYPE html> Document $(function() { pwd = localStorage.getItem("pwd") if (pwd == null || !isRight(pwd)) { window.location.href = 'login.html' } }) 成果突发奇想想做一下，很简单的小功能，其实没啥实用性，但就是突然想起来了，有兴趣的做一下吧 |
【本文地址】
今日新闻 |
推荐新闻 |