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即可。

版权声明

本文作者：河北工业大学梦云智开发团队 - 陈丽婷