Question

我的登录功能包含一个带有输入凭据的http请求（仅用于检查的无关请求）。通过这种方式，我可以通过不将带有NavController的下一个组件推入堆栈来解决请求或获得拒绝处理。

注销时，将删除保存在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方法（此服务用于另一个进行实际Rest调用的服务）：

@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()函数来检查我们是否在切换回App时登录。如果不再登录（以任何方式清理存储），我们将返回到LoginPage组件。

Answer 1

问题是我在某种程度上事先没有看到的回复中的会话标题。

我的解决方案是简单的Cookie清算：

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

Ionic 2清除注销时的App缓存

1 个答案: