前端登录态验证

最新推荐文章于 2024-03-04 09:55:48 发布
最新推荐文章于 2024-03-04 09:55:48 发布
阅读量310 收藏
点赞数
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_45896131/article/details/115140528
版权 

```java
<!--<html xmlns:th="http://www.thymeleaf.org">-->
<div th:fragment="html">
    <script>
        Vue.config.productionTip = true;
        $(function () {
            var data4Vue = {
                uri: 'api/iam/user/v1.2/userlogin',
                user: {name: '', password: ''},
                result: [],
                headers: [],
                checkVCode: '',
            };

            //ViewModel
            var vue = new Vue({
                el: '#workingArea',
                data: data4Vue,
                mounted: function () {
                    localStorage.getItem("Authorization");
                    linkDefaultActions();
                },
                methods: {
                    interceptor: function () {
                        console.log("拦截器检查" + config);
                        // 配置拦截器，中间件思想。白话：use 给请求之前做的事，可以是多件，可以 use 多次
                        /*this.$*/
                        axios.interceptors.request.use((config) => {
                                console.log('请求拦截器：');
                                console.log(config);
                                // 设置请求头，在这里插入代码片，类似 set-cookie
                                if (localStorage.getItem('Authorization') != null) {
                                    // config.headers = {} 这样设置，是覆盖
                                    config.headers['Authorization'] = localStorage.getItem('Authorization'); // 这样设置，是添加
                                }
                                return config;
                            },
                            error => {
                                console.log(error);
                                return Promise.reject(error);
                            });
                        // 响应拦截器
                        /*this.$*/
                        axios.interceptors.response.use((response) => {
                                console.log('响应拦截器：');
                                console.log(response);
                                // 获取服务器的响应头
                                if (response.headers.authorization) {
                                    //console.log(response.headers.authorization);
                                    localStorage.setItem('Authorization', response.headers.authorization);
                                }
                                return response;
                            },
                            error => {
                                console.log('err' + error)
                                Message({
                                    message: error.message,
                                    type: 'error',
                                    duration: 5 * 1000
                                })
                                return Promise.reject(error)
                            });
                    },
                    login: function () {
                        //this.interceptor();

                        //登录页面输入检查
                        if (0 == this.user.name.length) {
                            $("span.errorMessage").html("请输入用户名");
                            $("div.loginErrorMessageDiv").css("visibility", "visible");
                            return;
                        }
                        if (0 == this.user.password.length) {
                            $("span.errorMessage").html("请输入密码");
                            $("div.loginErrorMessageDiv").css("visibility", "visible");
                            return;
                        }

                        if (document.getElementById("vCodeResultIcon").className.localeCompare("bi bi-check-circle-fill")) {
                            $("span.errorMessage").html("验证码检查未通过");
                            $("div.loginErrorMessageDiv").css("visibility", "visible");

                            getCaptcha();
                            return;
                        }
                        //axios.defaults.headers['Authorization'] = window.localStorage.getItem("Authorization");
                        //登录请求
                        axios.post(this.uri, this.user)
                            .then(function (response) {
                                //console.log(response);
                                if (response.data.code == 0) {
                                    console.log("打印返回的token:" + response.headers.authorization);
                                    localStorage.setItem("Authorization", response.headers.authorization);
                                    //axios.defaults.headers.common['Authorization'] = localStorage.getItem("Authorization");
                                    //Router.get({path: 'home'});
                                    //location.href = "fore/home.html";
                                    //location.replace("home");
                                    //goHome();
                                    //location.redirect = "home.html";
                                } else {
                                    $("span.errorMessage").html(response.data.message);
                                    $("div.loginErrorMessageDiv").css("visibility", "visible");
                                }
                            })
                            .catch(function (error) {
                                alert("login error:" + error);
                            }).then(function () {
                            getCaptcha();
                        });
                    },
                    refreshCaptcha: function () {
                        getCaptcha();
                    },
                },
                watch: {
                    checkVCode: function () {
                        if (document.getElementById("vcodeStr").value.length == 4) {
                            //this.interceptor();
                            axios.post("captcha/v1/checkCaptcha?vCode=" + document.getElementById("vcodeStr").value/*+"&time="+new Date().getMinutes()+new Date().getMilliseconds()*/)
                                .then(function (response) {
                                    if (response.data.code == 0) {
                                        document.getElementById("vCodeResultIcon").className = "bi bi-check-circle-fill";
                                    } else {
                                        getCaptcha();
                                    }
                                })
                                .catch(function (error) {
                                    alert("checkVCode error:" + error);
                                });
                            ;
                        } else {
                            document.getElementById("vCodeResultIcon").className = "bi bi-x-circle-fill";
                        }
                        document.getElementById("vCodeResultIcon").style.visibility = "visible";
                    }
                },
            });

            $("div.loginSmallDiv").css("padding", 50, 25, 0, 25);
            $("div.loginSmallDiv").css("width", 350);
            $("div.loginSmallDiv").css("height", 450);
        });

        function  getCaptcha() {
            axios.get("captcha/v1/getCaptcha")
                .then(function (response) {
                    document.getElementById("randImg").src = "captcha/v1/getCaptcha";
                }).catch(function (error) {
                alert("getCaptcha error:" + error);
            });
            document.getElementById("vCodeResultIcon").style.visibility = "hidden";
            document.getElementById("vCodeResultIcon").className = "bi bi-x-circle-fill";
            document.getElementById("vcodeStr").value = "";
        }
    </script>
<a href="/dreamfuture/fore/home.html">home</a>
    <div id="loginDiv" style="position: relative;" align="center">
        <!--<img id="loginBackgroundImg" class="loginBackgroundImg" src="img/site/loginBackground.png" height="500">-->
        <div id="loginSmallDiv" class="loginSmallDiv" style="background-color: aliceblue">
            <div class="loginErrorMessageDiv" style="visibility: hidden">
                <div class="alert alert-danger">
                    <button type="button" class="close" data-dismiss="alert" aria-label="Close"></button>
                    <span class="errorMessage"></span>
                </div>
            </div>
            <!--<div>
                <p th:text="${result.message}" th:if="${not #strings.isEmpty(result.message)}"></p>
            </div>-->
            <div class="h4 mb-3 fw-normal">账户登录</div>
            <div class="input-group">
                <span class=" input-group-addon"><i class="bi bi-person"></i></span>
                <input v-model="user.name" class="form-control" placeholder="手机/会员名/邮箱" type="text" required v-focus>
            </div>
            <br>
            <div class="input-group">
                <span class=" input-group-addon"><i class="bi bi-key"></i></span>
                <input v-model="user.password" type="password" class="form-control" placeholder="密码" required>
            </div>
            <br>
            <div class="input-group">
                <span class=" input-group-addon">
                    <i class="bi bi-input-cursor-text"></i></span>
                <input v-model="checkVCode" id="vcodeStr" type="text" name="vcodeStr" class="form-control"
                       placeholder="请输入验证码"
                       maxlength="4"
                >
                <span class=" input-group-addon"><i class="bi bi-"></i></span>
                <span class=" input-group-addon">
                    <i class="bi bi-x-circle-fill" style="visibility: hidden" id="vCodeResultIcon"></i></span>
                <img src="captcha/v1/getCaptcha" id="randImg" @click="refreshCaptcha">
            </div>
            <br>
            <div class="checkbox mb-3">
                <label>
                    <input type="checkbox" value="remember-me" class="right-button"> 记住我
                </label>
                <label>
                    <input type="checkbox" value="remember-me"> 忘记密码
                </label>
            </div>
            <div style="margin-top:20px">
                <button class="w-50 btn btn-primary" type="button" @click="login">登录</button>
            </div>
            <br>
            <div>
                <a class="pull-left" href="#nowhere">忘记登录密码</a>
                <a href="register" class="pull-right">免费注册</a>
            </div>
        </div>
    </div>
</div>
昨日再显
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
前端对登录信息验证
potato_grow的博客
06-09 552
这里用的是document对登录信息的验证，要求用户输入名不能为空 重点内容： 1. var subEle = document.getElementById("btnSub")//通过id获取按钮元素 2. subEle.onclick //监听点击事件 3. unEle == null || ""== unEle //为空有这两种情况 4. return false; //一定要返回false <script type = "text/javascript"> window.
Django实现微信小程序的登录验证功能并维护登录态
09-19
### Django 实现微信小程序登录验证及登录态维护详解 #### 一、背景与目标 在当前互联网应用开发中，微信小程序作为一种重要的移动端平台，其便捷性和广泛的用户基础使其成为许多项目首选的技术方案之一。其中，...
前端应该掌握的登录认证知识
油墨香^-^的博客
12-07 1475
前一段时间，参与了老项目的迁移工作，配合后端接口迁移时，由于两个项目采取了不一样的登陆方案，所以遇到了跨域登录态无法共享的问题。经过各方协调，最终老项目将迁移页面部署在新项目的指定网关下，并且使用新项目的SSO登录方案。由迁移中遇到的登陆态共享问题，引发了我对SSO的思考与学习。如果发现文章中有什么错误之处，请及时指正～🙈2.1.1 是什么？JWT是一个开放的 JSON 格式 token 存储标准。它定义了一种安全、紧凑的方式来保存数据，通过签名的方式来校验 token 的合法性，主要支持的签名算法如 H
前、后端登录验证逻辑
a2285786446的博客
10-31 4657
登录
前端登录时所做的token验证（路由守卫、请求拦截器、响应拦截器）
昔冰_G的博客
06-29 7764
登录后的token校验，使用全局路由守卫beforeEach()先判断目标页面是否需要token身份校验，使用请求拦截器将token配置到请求对象上，借助响应拦截器提前处理token失效问题
SpringCloud+Vue在线教育项目——前台登录注册功能完善（后端）（整合JWT和阿里云短信服务）
m0_46275020的博客
06-01 1499
SpringCloud+Vue在线教育项目——前台登录注册功能完善（后端）（整合JWT和阿里云短信服务）![在这里插入图片描述](https://img-blog.csdnimg.cn/2020060114555531.jpg?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L20wXzQ2Mjc1MDIw,size_16,color_FFFFFF,t_70#p
登录认证前端
Massimo__JAVA的博客
10-06 245
登录认证前端
前端开源库-class-is
08-29
尽管这种机制很强大，但在某些场景下，如类型检查和多态性实现时，可能会显得不够直观。"class-is"库就是为了弥补这一不足而诞生的。 "class-is"库的工作原理是，当一个类实例化后，它会自动添加一个或多个`is...
前端开源库-generate-js
08-29
通过这个库，你可以定义类（class）并创建实例，同时支持方法的重写和多态性，这在大型项目中尤其重要，因为它有助于保持代码结构清晰，降低耦合度。 生成器（Generator）是ECMAScript 6引入的一个特性，它允许函数...
前端开源库-fast-loops
08-30
在并发或多任务环境中，不可变数据结构可以避免竞态条件，提高代码的正确性和可靠性。 在fast-loops-master这个压缩包中，很可能包含了库的源代码、示例、测试用例以及文档等。源代码部分将展示其实现快速循环的...
你要的FPGA&数字前端笔面试题都在这儿了.pdf
04-17
这些问题反映了FPGA和数字前端设计工程师必须掌握的基础知识和高级技能，包括硬件描述语言、逻辑设计、时序分析、低功耗设计以及硬件验证等方面。熟悉这些知识点对于准备面试和实际项目开发至关重要。
前端登录验证
weixin_43727458的博客
08-18 1703
随着技术发展，前端登录验证也是层出不穷，今天主要介绍一下主流的滑块认证和验证码认证 滑块认证 滑块认证属于行为认证，主要通过用户的操作行为来区分机器模拟行为。实现如下，这里使用vue搭建的系统。 系统界面： <!-- 先在页面上设置两个容器，用于存放滑块图片和验证结果 --> <div ref="captcha" id="captcha"></div> <div id="msg"></div> <sc
前端登录之登录状态
FarmerLZJ的专栏
07-15 1030
#背景 我们都知道http是无状态的，这也就意味着请求方和响应方之间无法维护状态，都是一次性的，他不知道请求前都发生过什么。但在有的应用场景下我们需要维护状态，比如各种后台管理系统都需要登录才能进行各种操作，这时我们就需要维护用户的登录状态。 常见的登录方案有： 1.cookies+session 2.jsonwebtoken(JWT) #cookie以及session cookie是前端存储的一种，但相比于localStorage等其他方式，借助...
Web应用登录验证的几种方式
Zero摄氏度的博客
08-25 4447
1、HTTP 是无状态的，为了维持前后请求，需要前端存储标记-----cookie 2、cookie 是一种完善的标记方式，通过 HTTP 头或 js 操作，有对应的安全策略，是大多数状态管理方案的基石 3、session 是一种状态管理方案，前端通过 cookie 存储 id，后端存储数据，但后端要处理分布式问题 4、token 是另一种状态管理方案，token 的编码技术，通常基于 base64，或增加加密算法防篡改；jwt 是一种成熟的编码方案，并且JWT实现了无状态登录，相较于传统的有状态登录
vue实现前端登录验证码
qq_46141403的博客
01-11 2969
前端实现简单验证码
vue前端登录token验证
m0_56698268的博客
12-26 1239
vue前端登录token验证，登录超时后重新登录
前端小案例——登录界面（正则验证, 附源码）
最新发布
前端小白一枚
03-04 2190
这是一个非常适合前端入门练习的小案例，各位小伙伴可以自行更改样式和内容，如果大家运行时出现问题或代码有什么不懂的地方都可以随时评论留言或联系博主QQ。来监听 DOMContentLoaded 事件，确保页面中的所有元素都已加载完毕。最后，根据验证结果，在页面上显示相应的提示信息。在表单提交事件中，首先阻止默认的表单提交行为。，以便在验证用户输入后自行处理提交逻辑。和用于显示验证信息的元素。当页面加载完成后，通过。用于验证身份证号码。
登录验证的步骤
weixin_48952990的博客
07-04 919
项目中登录验证的步骤
前端常见登录实现方案 + 单点登录方案
XH_jing的博客
02-25 9680
登录是每个网站中都会用到的一个必备功能，但是如何实现一个优秀的登录功能，如何根据自己的项目来选择一个适合自己的登录方案？今天我们就来介绍几种常用的登录方案。 Cookie + Session 登录 Token 登录 SSO 单点登录 OAuth 第三方登录 一、Cookie + Session 登录 HTTP 是一种无状态的协议，客户端每次发送请求时，首先要和服务器端建立一个连接，在请求完成后又会断开这个连接。这种方式可以节省传输时占用的连接资源，但同时也存在一个问题：每次请求都是独立的，服务器端无法
前端与后端接口V31：AJAX实现与权限验证
4. **登录态验证**： - 使用cookies存储和传递token，后端在验证用户登录时，会检查前端发送的cookies中的token信息，验证其有效性，从而简化了登录过程。 5. **页面类型和数据传输**： - 登录页面采用POST请求，...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值