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的錯誤

 

咱們想

 

 

 

 

 

這個是固定 的 就不用數據綁定了