16.1 用auth0服务 实现用登录和管理 使用auth版本的2个大坑。
?
?
這是三周內(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)題。
- 上一篇: sql server关闭存储过程中未提交
- 下一篇: java之初学线程