?

?

這是三周內(nèi)容，實(shí)現(xiàn)用戶登錄和管理

回到master分支?

?

?

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

?

開(kāi)始工作寫(xiě)代碼了

安裝2個(gè)angular端的auth0的lib，也可不安裝，后邊有不安裝的做法

?

?

?不安裝的方法是

?

我們知道我們所有的client端的代碼或者js文件，都是通過(guò)咱們用ng bulid --watch 時(shí)刻生成的 public目錄下index.html加載運(yùn)行的

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

那我們?nèi)ツ睦镄薷哪?#xff1f;

我們當(dāng)然是oj-client/src/? 下 index.html

?

?

2個(gè)都可以，區(qū)別就是一個(gè)下載到本地安裝，另外一個(gè)是用在線的。都可以。我們用安裝的

?

?

?

這樣我們就有所有的依賴，利用這個(gè)lib（包）我們就可以用auth0

?

?

下一步就是實(shí)現(xiàn)login in 功能（和以前我們的寫(xiě)法一樣 ， 建立service）

angular-cli就幫我們生成2個(gè)文件

?

然后就從官網(wǎng)上 復(fù)制粘貼模板

?

必須聲明才可以

?

?

?

?

?如何讓其他component使用這個(gè)service呢？

?

?

?服務(wù)有了 就要用了 因?yàn)閘ogin那個(gè)按鈕在navbar哪里 所以

?

?

?我們?nèi)ロ?yè)面看看

?

然后我們?cè)囋囘\(yùn)行一下

?

?

?

?

?

?

?

?

點(diǎn)一下sign in 試試

?

?

?說(shuō)明cookie記錄了

?

發(fā)現(xiàn)是可以的。

官網(wǎng)jwt.io將token貼入會(huì)返回3部分信息??

?

?

但是

有2個(gè)大坑，雖然說(shuō)繼承auth很簡(jiǎn)單，但是呢，因?yàn)閍pi版本和用法的不同，會(huì)出現(xiàn)很多問(wèn)題，解決方法就是版本對(duì)應(yīng)。

比如，我們?cè)谟帽容^新的版本時(shí)（10.8），

我們發(fā)現(xiàn)等我們?cè)诰唧w頁(yè)面登錄的時(shí)候

登錄后 跳轉(zhuǎn)到了 首頁(yè) 而不是登錄時(shí)具體的頁(yè)面

這是很不理想的！

?

問(wèn)題二

另外一個(gè)坑是

當(dāng)我們?cè)诰唧w頁(yè)面刷新以后登錄 會(huì)報(bào)錯(cuò)，callback地址改變不再是localhost：3000 而是變成 localhost：3000/problems/1

但是這個(gè)地址是我們沒(méi)有添加到callback地址的，你會(huì)說(shuō)，我們添加就好了，但是如果是localhost：3000/problems/2

你還要添加一次 3 你還要添加 這是我們不能接受的

?

?

其實(shí)是API版本問(wèn)題

怎么修正呢？

你可以選擇就的版本

修改client端下的index.html

如果你是用CDN那個(gè)方式的話就改具體的版本號(hào)

?

?

新API為什么這樣呢？

留個(gè)坑 看文檔吧

還是改回老版本吧 且用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的寫(xiě)法 不是在construction里面判斷了，而是改成，在login里面 調(diào)用callback function （三個(gè)參數(shù)），

?

?

我們?cè)诘卿浺院?/p>

應(yīng)該在navbar顯示名字

?

?

還是用cdn吧

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

變成異步的登錄

?

那么profile怎么弄呢（我們頁(yè)面顯示具體用戶名，而不是寫(xiě)死的變量。字符串）

?

?

我們?nèi)avbar

這個(gè)nickname是在我們?yōu)g覽器按F12點(diǎn)

?

?

?但是我們要寫(xiě)成異步的，因?yàn)?#xff0c;他是個(gè)http請(qǐng)求，請(qǐng)求的是auth0這個(gè)官網(wǎng)，不然會(huì)報(bào)null的錯(cuò)誤

?

我們想

?

?

?

?

?

這個(gè)是固定 的 就不用數(shù)據(jù)綁定了

?

轉(zhuǎn)載于:https://www.cnblogs.com/PoeticalJustice/p/9322968.html

總結(jié)

以上是生活随笔為你收集整理的16.1 用auth0服务 实现用登录和管理 使用auth版本的2个大坑。的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問(wèn)題。

如果覺(jué)得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。