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的错误

 

咱们想

 

 

 

 

 

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