2016-10-26 6 views
-2

私のログイン機能は、入力されたクレデンシャルでHTTPリクエスト(チェックのために無関係なもの)で構成されています。このようにして、要求を解決するか、NavControllerを使用して次のコンポーネントをスタックにプッシュしないことで、私が処理する拒否を得ることができます。ログアウト時にIonic 2のキャッシュをクリアする

ログアウトすると、Ionic Storageに保存されている認証情報が削除されます。今すぐ問題が始まります:リクエストがAuth例外をスローしないため、ストレージに現在保存されている資格情報はログインリクエストによって使用されていないようです。ブラウザのキャッシュをクリアした後でのみ、再び動作します。

これはすべて、ウェブブラウザと電話でアプリケーションを提供することで発生しました。

この現象を防ぐために、Ionic 2でAppキャッシュ(View/Componentキャッシュだけでなく)をクリアするにはどうすればよいですか?現時点でこの問題に関する文書や質問はありません。

認証サービス:

@Injectable() 
export class AuthService { 

HAS_LOGGED_IN = 'hasLoggedIn'; 

constructor(private storage: Storage) { 
    // this.rest = rest; 
    console.log('auth'); 
} 

setCredentials(credentials) { 
    this.storage.set('username', credentials.username); 
    this.storage.set('password', credentials.password); 
} 

logout(): void { 
    this.storage.remove('username'); 
    this.storage.remove('password'); 
    this.storage.remove(this.HAS_LOGGED_IN); 
} 

hasLoggedIn() { 
    return this.storage.get(this.HAS_LOGGED_IN).then(value => { 
     console.log('hasLoggedIN value: ' + value); 
     return value === true; 
    }); 
} 
} 

ログインコンポーネント:

@Component({ 
    selector: 'page-login', 
    templateUrl: 'login.html', 
}) 
export class LoginPage { 

    model: any; 
    HAS_LOGGED_IN: string = 'hasLoggedIn'; 

    constructor(private navCtrl: NavController, 
       private viewCtrl: ViewController, 
       private auth: AuthService, 
       private toastCtrl: ToastController, 
       private rest: RestService, 
       private storage: Storage) { 

    } 
    ionViewDidLoad() { 
     this.model = {}; 
    } 

    ionViewWillEnter() { 
     this.viewCtrl.showBackButton(false); 
     this.displayTab(false); 
    } 

    login() { 
     console.log(this.model); 
     console.log('login() claled'); 
     this.displayTab(true); 
     this.auth.setCredentials(this.model); 

     this.rest.getEntryPoint().then(data => { 
      console.log(data); 
      this.storage.set(this.HAS_LOGGED_IN, true); 
      this.navCtrl.push(OverviewPage); 
     }).catch(err => { 
      this.storage.set(this.HAS_LOGGED_IN, false); 
      console.log('Error:'); 
      console.log(err); 
      this.navCtrl.push(LoginPage).then(response => { 
       console.log(response); 
       console.log(this.navCtrl); 
       console.log('pushed login 1'); 
      }); 
     }); 
    } 

    validate(items: boolean) { 

     if (items) { 
      let toast = this.toastCtrl.create({ 
       message: 'Passwort und Benutzername sind zwingend', 
       duration: 3000, 
       position: 'bottom', 
      }); 

      toast.onDidDismiss(() => { 
       console.log('Dismissed toast'); 
      }); 

      toast.present(); 
     } 
    } 

    private displayTab(display: boolean) { 
     let elements = document.querySelectorAll('.tabbar'); 

     if (elements != null) { 
      Object.keys(elements).map((key) => { 
       elements[key].style.transform = display ? 'translateY(0)' : 'translateY(70px)'; 
      }); 
     } 
    } 
} 

インターセプトHTTPメソッド(このサービスは、実際の休息の呼び出しを行う別のサービスで使用されている):

@Injectable() 
export class HttpInterceptorService { 

    constructor(@Inject(Http) private http: Http, private storage: Storage) { 
     this.http = http; 
     console.log('interceptor'); 
    } 

    get(url) { 
     return new Promise((resolve, reject) => { 
      let headers = new Headers(); 
      this.createAuthorizationHeader(headers).then(() => { 
       return this.http.get(url, { 
        headers: headers, 
       }).subscribe(data => { 
        resolve(data.json()); 
       }, err => { 
        reject(err); 
       }); 
      }); 
     }); 
    } 

    put(url: string, attributes?) { 
     return new Promise((resolve, reject) => { 
      let headers = new Headers(); 
      this.createAuthorizationHeader(headers).then(() => { 
       return this.http.put(url, (attributes) ? attributes : {}, { 
        headers: headers, 
       }).subscribe(data => { 
        resolve(data.json()); 
       }, err => { 
        reject(err); 
       }); 
      }); 
     }); 
    } 

    post(url: string, data) { 
     return new Promise((resolve, reject) => { 
      let headers = new Headers(); 
      this.createAuthorizationHeader(headers).then(() => { 
       return this.http.post(url, data, { 
        headers: headers, 
       }).subscribe(output => { 
        resolve(output.json()); 
       }, err => { 
        reject(err); 
       }); 
      }); 
     }); 
    } 

    private createAuthorizationHeader(headers: Headers): Promise<void> { 
     console.log('creating auth header'); 
     return new Promise(resolve => { 
      this.storage.get('username') 
       .then(username => { 
        this.storage.get('password') 
         .then(password => { 
          headers.append('Authorization', 'Basic ' + 
           btoa(username + ':' + password)); 
          resolve(); 
         }); 
       }); 
     }); 
    } 
} 

他のコンポーネントは、hasLoggedIn()の機能を使用して、ログインしているかどうかを確認したり、swアプリケーションにかゆみが戻ってくる。これ以上ログインしていない(何らかの方法でストレージが消去されている)場合、LoginPageコンポーネントに戻ります。

+0

ありがとう:

私のソリューションは、簡単なクッキーのクリアです。 –

+0

いくつかのコードを教えてください。たぶんあなたのローカル記憶域を正しく実装していない – LeRoy

+0

@LeRoyこれは少し助けてほしいと思っています:) –

答えて

-2

問題は、私が何とか事前に見なかったレスポンスのセッションヘッダーでした。ダウン実際に彼/彼女がこれをやって作ったものについてのメッセージを残すことなく、私の質問を投票し、この人に

window.cookies.clear(function() {}); 
+1

その文の 'window'とは何ですか?どのようにあなたのIonicアプリでそれを保持するのですか? – Gauzy

関連する問題