如何实现登录判断

这里是修真院前端小课堂，每篇分享文从

今天给大家分享一下，修真院官网前端任务js6，深度思考中的知识点——如何实现登录判断

一、背景知识：

登录功能，是前端经常要完成的需求之一。

一个 网站有很多的操作是必须要用户登陆才能进行操作的

那么如何进行登录判断？

需要用到什么样的属性或者方法？

有什么地方的细节需要注意？

以上这些，都是本次小课堂要讲解的重点！

二、知识剖析

路由卫士：

创建路由后，任何用户都能在任何时候导航到任何地方。 但有时候这样是不对的。 该用户可能无权导航到目标组件。 可能用户得先登录（认证）。 在显示目标组件前，你可能得先获取某些数据。 在离开组件前，你可能要先保存修改。 你可能要询问用户：你是否要放弃本次更改，而不用保存它们？ 你可以往路由配置中添加守卫，来处理这些场景。 守卫返回一个值，以控制路由器的行为： 如果它返回 true，导航过程会继续 如果它返回 false，导航过程会终止，且用户会留在原地。

守卫还可以告诉路由器导航到别处，这样也取消当前的导航。 守卫可以用同步的方式返回一个布尔值。但在很多情况下，守卫无法用同步的方式给出答案。 守卫可能会向用户问一个问题、把更改保存到服务器，或者获取新数据，而这些都是异步操作。 因此，路由的守卫可以返回一个 Observable或 Promise，并且路由器会等待这个可观察对象被解析为 true 或 false。

三、常见问题

如何使用路由卫士？

四、解决方案

利用CANACTIVATE接口及 LOCALSTORAGE

新增卫士服务，负责认证和授权资源

导入路由模块

登录时，退出时的操作

五、编码实战

angular6路由卫士设置方法：

新增卫士服务

// src/app/serve/auth-guard.service.ts

import { Injectable } from ‘@angular/core’;

import { Router, CanActivate } from ‘@angular/router’;

@Injectable()

export class AuthGuardService implements CanActivate {

constructor(public router: Router) {}

canActivate(): boolean {

if (localStorage.getItem('username') === null) {      // 验证登录状态

  this.router.navigate(['/login']);                   // 重定向

  return false;

}

return true;

}

}

导入路由模块

// src/app/app.routing.module.ts

import { Routes, CanActivate } from ‘@angular/router’; // 导入依赖

import {

AuthGuardService as AuthGuard

} from ‘…/app/serve/auth-guard.service’; // 导入服务

const routes: Routes = [

{ path: ‘’, redirectTo: ‘/login’, pathMatch: ‘full’ },

{ path: ‘login’, component: AdminLoginComponent },

{

path: 'global',

component: GlobalComponent,

children: childRoutes,

canActivate: [AuthGuard]          // 添加验证服务

}

];

@NgModule({

…

providers: [ AuthGuard ], // 添加提供者

})

登录时：

…

if (this.data.code === 0) { // 用户名密码验证成功

  localStorage.setItem('username', 'admin');  

  this.router.navigate([`../global`]);          

    }

…

退出时：

logout() {

localStorage.removeItem('username');

this.router.navigate(['/login']);

}

六、拓展思考

在过于依赖客户端路由保护为我们提供安全性之前，理解它的 工作机制是至关重要的。实际上，你应该把客户端路由保护看作用户体验的一 种形式，而不是安全的一种形式。 归根到底，应用的所有JavaScript代码都会服务于客户端。不管用户是否已经登 录，这些代码都能被检测到。 因此，如果有敏感数据需要保护，你必须使用服务器端认证来保护它们。也就 是说， 对每条查询数据的请求， 都要求用户提供一个服务器验证的有效API密钥 （或者认证令牌） 。 构建完整的认证系统超出了本小课堂的范围。最重要的是要明白，在客户端保护路 由并不一定会阻挡任何人查看这些路由背后的JavaScript页面。

七、参考文献

http://www.cnblogs.com/dolphinX/p/3348469.html

https://baike.so.com/doc/4477793-4686855.html

https://blog.csdn.net/xtzz92/article/details/51668644

八、更多讨论

1.如何选取本地存储：

根据特性使用，若需要永久存储，则选择localStorage，若需要关闭网页就销毁数据，则选择sessionStorage

2.完全没必要用Cookie吗？

不是，虽然cookie有着诸多缺点，但cookie也有许多不可替代的特性，比如可以灵活的设置过期时间，也可以设置作用域。能在服务器和客户端进行数据交互。

3.WebStorage的数据可以上传到服务器吗？

Webstorage不会传递到服务器端，且webStorage就是为了解决cookie频繁在服务器和客户端交互的弊端而设，webstorage就是为了在客户端存储数据而生，不应舍本逐末。