Angular 登陆注销
前言
之前一直感觉自己对登陆注销掌握的很好,无非就是登陆的时候一个验证用户名密码,设置判断登陆的标志,就有点飘,一直没有认真看代码是怎么实现的,包括到上次老师让我写登陆和个人中心的时候才意识到自己还没有搞清楚很多细节(对我来说)。
登陆
一、验证用户名密码
首先说一下我对登陆的理解,首先说登陆需要什么,我们通常登陆需要用户名,密码,以上两者为登陆需要的客体,想要完成登陆这个功能我还需要处理客体的方法,这就涉及到了匹配用户,验证用户名密码是否正确,想要完成这个功能只需要拿着用户名( 如果用户名唯一)去数据库找相应的user信息,然后将用户所输入的密码经过与用户自己设置或者初始密码相同的加密方式加密后对比两者一不一样即可。
二、登陆状态的设定
以上都很简单就是,因为涉及不到多个组件,只是单纯的前台通过浏览器给后台信息,后台去找数据库取信息然后匹配返回结果而已,而我真正忽略最多的是登陆的状态设置,我之前是没有认真看过登陆状态的设置的,为什么在用户登录之后我们要设置一个用户已经登陆的状态,为什么要存这种状态呢?
1、登陆状态存储
我们通常在浏览界面的时候肯定会经常出现刷新页面的情况,而我们每次刷新页面,浏览器都会请求一次前台,重新跑一次前台的代码,这就会导致我们每刷新一次都必须得重新登录一次,为了避免此这种情况的发生,浏览器为我们提供了三个内置对象document.cookie、Window.sessionStorage、Window.localStorage,这三个对象都可以临时存储一些数据,从而解决此问题。但是这三者不是完全一样的,需根据需求选取不同的对象,区别如下:
在用户未登录时我们需要让用户访问登陆界面,在登录之后直接进入首页V曾可以这样写
我们需要读取登录状态的时候就可以直接读取三个之中的一个对象里面保存的信息。如下:
在app.component.ts初始化的时候先对Window.sessionStorage里的login属性设置为true。
2、用户信息存储
再刷新页面的时候浏览器通常会重新请求服务器,比如我们现在浏览的界面是个人中心,那么如果我们没有保存数据,刷新界面之后 又会重新从首页开始加载,为了解决这个问题我们需要把用户的数据保存下来,此时我们可以用到x-auth-token,这个x-auth-token也是window.sessionStorage中的一个属性
注销
注销相对来说就比较容易了,点击注销后 ,登录状态变为false,后台删除token即可。
版权声明
本文作者:河北工业大学梦云智开发团队 - 陈丽婷
原文地址:https://www.cnblogs.com/ipython258/p/14878770.html
- Python正则表达式中的re.S的作用
- 图片转文字居然这么简单,多亏了这几个神器!
- 三、请求库之requests模块
- 升级 微信技术输出 时尚新门店尝鲜刷脸支付
- WSP Global品牌升级 启用3声母域名
- 一、爬虫基本原理
- python 中__setattr__, __getattr__,__getattribute__, __call__使用方法
- 量子技术与人工智能:同时进化的双生子
- TCP协议三次握手与四次挥手通俗解析
- Silverlight/aspx/ajax/mvc的UI自动化测试
- Office Open XML学习(1)-创建excel文档,并向单元格中插入字符串
- PyMC3和Theano代码构建贝叶斯深度网络,61页PPT探索贝叶斯深度学习以及实现
- 男程序员是不是都不会和女生表达交流?程序员的回答歪了
- Silverlight Telerik控件学习:主题Theme切换
- JavaScript 教程
- JavaScript 编辑工具
- JavaScript 与HTML
- JavaScript 与Java
- JavaScript 数据结构
- JavaScript 基本数据类型
- JavaScript 特殊数据类型
- JavaScript 运算符
- JavaScript typeof 运算符
- JavaScript 表达式
- JavaScript 类型转换
- JavaScript 基本语法
- JavaScript 注释
- Javascript 基本处理流程
- Javascript 选择结构
- Javascript if 语句
- Javascript if 语句的嵌套
- Javascript switch 语句
- Javascript 循环结构
- Javascript 循环结构实例
- Javascript 跳转语句
- Javascript 控制语句总结
- Javascript 函数介绍
- Javascript 函数的定义
- Javascript 函数调用
- Javascript 几种特殊的函数
- JavaScript 内置函数简介
- Javascript eval() 函数
- Javascript isFinite() 函数
- Javascript isNaN() 函数
- parseInt() 与 parseFloat()
- escape() 与 unescape()
- Javascript 字符串介绍
- Javascript length属性
- javascript 字符串函数
- Javascript 日期对象简介
- Javascript 日期对象用途
- Date 对象属性和方法
- Javascript 数组是什么
- Javascript 创建数组
- Javascript 数组赋值与取值
- Javascript 数组属性和方法