16.1 用auth0服务实现用登录和管理使用auth版本的2个大坑。

这是三周内容，实现用户登录和管理

回到master分支

切换到 han分支更新一下然后工作

开始工作写代码了

安装2个angular端的auth0的lib，也可不安装，后边有不安装的做法

不安装的方法是

我们知道我们所有的client端的代码或者js文件，都是通过咱们用ng bulid --watch 时刻生成的 public目录下index.html加载运行的

但是呢？我们是不能够直接修改index.html的他是angular-cli帮我们生成的（用ng build --watch命令）

那我们去哪里修改呢？

我们当然是oj-client/src/ 下 index.html

2个都可以，区别就是一个下载到本地安装，另外一个是用在线的。都可以。我们用安装的

这样我们就有所有的依赖，利用这个lib（包）我们就可以用auth0

下一步就是实现login in 功能（和以前我们的写法一样，建立service）

angular-cli就帮我们生成2个文件

然后就从官网上复制粘贴模板

必须声明才可以

如何让其他component使用这个service呢？

服务有了就要用了因为login那个按钮在navbar哪里所以

我们去页面看看

然后我们试试运行一下

点一下sign in 试试

说明cookie记录了

发现是可以的。

官网jwt.io将token贴入会返回3部分信息

但是

有2个大坑，虽然说继承auth很简单，但是呢，因为api版本和用法的不同，会出现很多问题，解决方法就是版本对应。

比如，我们在用比较新的版本时（10.8），

我们发现等我们在具体页面登录的时候

登录后跳转到了首页而不是登录时具体的页面

这是很不理想的！

问题二

另外一个坑是

当我们在具体页面刷新以后登录会报错，callback地址改变不再是localhost：3000 而是变成 localhost：3000/problems/1

但是这个地址是我们没有添加到callback地址的，你会说，我们添加就好了，但是如果是localhost：3000/problems/2

你还要添加一次 3 你还要添加这是我们不能接受的

其实是API版本问题

怎么修正呢？

你可以选择就的版本

修改client端下的index.html

如果你是用CDN那个方式的话就改具体的版本号

新API为什么这样呢？

留个坑看文档吧

还是改回老版本吧且用cdn的方式

//version : use cdn in index.html by <script  src="https://cdn.auth0.com/lock-9.0.min.js"></script>
import { Injectable } from '@angular/core';
import {tokenNotExpired} from "angular2-jwt";declare var Auth0Lock:any;@Injectable(/*{providedIn: 'root'}*/)
export class AuthService {clientId ='Kpohf0lVYOVRyK2-QjArHjqCq6kSdelz';domain = 'bittiger.auth0.com';lock = new Auth0Lock(this.clientId,this.domain,{});constructor() {
/*    this.lock.on("authenticated",(authResult)=>{localStorage.setItem('id_token',authResult.idToken);});*/}public login(){/*this.lock.show();*/this.lock.show((error :string, profile:Object , id_token:string ) => {if(error){console.log(error);}else {localStorage.setItem('profile',JSON.stringify(profile));localStorage.setItem('id_token',id_token);}});}public logout(){localStorage.removeItem('id_token');localStorage.removeItem('profile');}public authenticated(){return tokenNotExpired();}
}

　　老版本9.0的写法不是在construction里面判断了，而是改成，在login里面调用callback function （三个参数），

我们在登录以后

应该在navbar显示名字

还是用cdn吧

https://auth0.com/docs/libraries/lock/v9

变成异步的登录

那么profile怎么弄呢（我们页面显示具体用户名，而不是写死的变量。字符串）

我们去navbar

这个nickname是在我们浏览器按F12点

但是我们要写成异步的，因为，他是个http请求，请求的是auth0这个官网，不然会报null的错误

我们想

这个是固定的就不用数据绑定了

转载于:https://www.cnblogs.com/PoeticalJustice/p/9322968.html

16.1 用auth0服务实现用登录和管理使用auth版本的2个大坑。相关推荐

阿里云公布IP地理位置库抄袭调查结果；华为云电脑8月16日将停止服务和运营；Chrome 92发布|极客头条...
「极客头条」-- 技术人员的新闻圈! CSDN 的读者朋友们早上好哇,「极客头条」来啦,快来看今天都有哪些值得我们技术人关注的重要新闻吧. 整理 | 梦依丹出品 | CSDN(ID:CSDNnews ...
WEB服务在单点登录系统中的应用研究
WEB服务在单点登录系统中的应用研究转载于:https://blog.51cto.com/hnoas/105573
Spring Cloud入门-Sentinel实现服务限流、熔断与降级(Hoxton版本)
文章目录 Spring Cloud入门系列汇总摘要 Sentinel简介安装Sentinel控制台创建sentinel-service模块限流功能创建RateLimitController类 ...
中国重汽微服务管理_springcloud微服务架构实战：商家管理微服务设计
商家管理微服务设计商家管理微服务是一个独立的RESTAPI应用,这个应用通过接口服务对外提供商家信息管理.商家权限管理和菜单资源管理等方面的功能. 商家管理微服务开发在merchant-restap ...
linux查看vnc服务加密修复,VNC远程管理Linux服务器安全指导
在开源领域,远程遥控技术的代表就是VNC了.VNC(Virtual Network Computer,虚拟网络计算机)是一套由AT&T实验室开发的可操控远程计算机的软件.根据主控端与被控端的不 ...
Unbound服务的安装与运行管理
一.Unbound服务的安装与运行管理 1．获取Unbound软件包 RHEL7.x自带了Bind和Unbound两种DNS服务包,Unbound是红帽公司推荐使用的DNS服务器.目前,虽然Bind在 ...
传奇服务器包裹元宝数量显示,GOM传奇服务端测试记录元宝，传奇GM版本库测试区记录元宝数量教程...
GOM传奇服务端测试记录元宝,传奇GM版本库测试区记录元宝数量教程本文出处:网游动力作者:本站发布时间:2019-09-01阅读次数: [@main] #IF #ACT OPENMERCHANTBI ...
IP-guard如何映射到外网登录访问管理
终端安全管理(endpoint security management)是一种保护网络安全的策略式方法,它需要终端设备在得到访问网络资源的许可之前遵从特定的标准.随着企业信息化发展,终端安全管理系统需 ...
微服务服务器集群Session管理演进史
点击上方"JavaEdge",关注公众号设为"星标",好文章不错过! 应用服务器的高可用设计主要基于服务无状态这一特性,但事实上,业务总是有状态: 在电商网 ...

16.1 用auth0服务实现用登录和管理使用auth版本的2个大坑。

16.1 用auth0服务实现用登录和管理使用auth版本的2个大坑。相关推荐

最新文章

热门文章

16.1 用auth0服务 实现用登录和管理 使用auth版本的2个大坑。

16.1 用auth0服务 实现用登录和管理 使用auth版本的2个大坑。相关推荐

最新文章

热门文章

16.1 用auth0服务实现用登录和管理使用auth版本的2个大坑。

16.1 用auth0服务实现用登录和管理使用auth版本的2个大坑。相关推荐