Ionic2 Rest 认证1、创建Ionic 2 APP2、创建服务3、创建登陆和注册页面4、登出和token检查
Ionic2 Rest 认证1、创建Ionic 2 APP2、创建服务3、创建登陆和注册页面4、登出和token检查
今天，我们使用REST API实现用户名密码认证，服务端端点如下：
Endpoint | 请求 | 响应 |
|---|---|---|
/login | { username: '',password: '' } | auth_token |
/logout | add a token to headers | |
/register | { username: '', password: '' } |
1、创建Ionic 2 APP
反复练习，应该是很熟悉了：
ionic start Ionic2RestAuth --v2我习惯上会先启动看看，确保项目创建成功：
cd Ionic2RestAuth
ionic serve --lab看到如下界面应该就可以放心了：
Ionic应用界面
2、创建服务
我们需要创建一个服务来访问REST Api，命令如下：
ionic g provider AuthService我们创建对应的方法来访问注册、登陆、登出REST。
修改 src/providers/auth-service.ts如下：
import { Injectable } from '@angular/core';
import { Http, Headers } from '@angular/http';
import 'rxjs/add/operator/map';
let apiUrl = 'http://localhost:8080/api/';
@Injectable()
export class AuthService {
constructor(public http: Http) {}
login(credentials) {
return new Promise((resolve, reject) => {
let headers = new Headers();
headers.append('Content-Type', 'application/json');
this.http.post(apiUrl+'login', JSON.stringify(credentials), {headers: headers})
.subscribe(res => {
resolve(res.json());
}, (err) => {
reject(err);
});
});
}
register(data) {
return new Promise((resolve, reject) => {
let headers = new Headers();
headers.append('Content-Type', 'application/json');
this.http.post(apiUrl+'guest/signup', JSON.stringify(data), {headers: headers})
.subscribe(res => {
resolve(res.json());
}, (err) => {
reject(err);
});
});
}
logout(){
return new Promise((resolve, reject) => {
let headers = new Headers();
headers.append('X-Auth-Token', localStorage.getItem('token'));
this.http.post(apiUrl+'logout', {}, {headers: headers})
.subscribe(res => {
localStorage.clear();
}, (err) => {
reject(err);
});
});
}
}接下来修改 src/app/app.module.ts 中的 import 和 @NgModule providers：
...
import { AuthService } from '../providers/auth-service';
...
providers: [{provide: ErrorHandler, useClass: IonicErrorHandler}, AuthService]
...3、创建登陆和注册页面
我们需要创建相应的页面实现登陆和注册，如下命令将自动生成视图、控制器和样式文件：
ionic g page Login
ionic g page Register修改' src/app/app.module.ts' wen文件如下：
import { LoginPage } from '../pages/login/login';
import { RegisterPage } from '../pages/register/register';
@NgModule({
declarations: [
MyApp,
AboutPage,
ContactPage,
HomePage,
TabsPage,
LoginPage,
RegisterPage
],
imports: [
IonicModule.forRoot(MyApp)
],
bootstrap: [IonicApp],
entryComponents: [
MyApp,
AboutPage,
ContactPage,
HomePage,
TabsPage,
LoginPage,
RegisterPage
],
providers: [{provide: ErrorHandler, useClass: IonicErrorHandler}, AuthService]
})修改 src/pages/login/login.ts 文件如下：
import { Component } from '@angular/core';
import { NavController, LoadingController, ToastController } from 'ionic-angular';
import { AuthService } from '../../providers/auth-service';
import { TabsPage } from '../tabs/tabs';
import { RegisterPage } from '../register/register';
@Component({
selector: 'page-login',
templateUrl: 'login.html'
})
export class LoginPage {
loading: any;
loginData = { username:'', password:'' };
data: any;
constructor(public navCtrl: NavController, public authService: AuthService, public loadingCtrl: LoadingController, private toastCtrl: ToastController) {}
doLogin() {
this.showLoader();
this.authService.login(this.loginData).then((result) => {
this.loading.dismiss();
this.data = result;
localStorage.setItem('token', this.data.access_token);
this.navCtrl.setRoot(TabsPage);
}, (err) => {
this.loading.dismiss();
this.presentToast(err);
});
}
register() {
this.navCtrl.push(RegisterPage);
}
showLoader(){
this.loading = this.loadingCtrl.create({
content: 'Authenticating...'
});
this.loading.present();
}
presentToast(msg) {
let toast = this.toastCtrl.create({
message: msg,
duration: 3000,
position: 'bottom',
dismissOnPageChange: true
});
toast.onDidDismiss(() => {
console.log('Dismissed toast');
});
toast.present();
}
}修改 pages/login/login.html 文件如下：
<ion-content padding>
<h2>Please, Login</h2>
<form (submit)="doLogin()">
<ion-item>
<ion-label stacked>Username</ion-label>
<ion-input [(ngModel)]="loginData.username" name="username" type="text" placeholder="Username" ></ion-input>
</ion-item>
<ion-item>
<ion-label stacked>Password</ion-label>
<ion-input [(ngModel)]="loginData.password" name="password" type="password" placeholder="Password"></ion-input>
</ion-item>
<button ion-button block type="submit">
Login
</button>
</form>
<button ion-button block clear (click)="register()">
No have an account? Register Now
</button>
</ion-content>修改 edit pages/register/register.ts 如下：
import { Component } from '@angular/core';
import { NavController, NavParams, LoadingController, ToastController } from 'ionic-angular';
import { AuthService } from '../../providers/auth-service';
@Component({
selector: 'page-register',
templateUrl: 'register.html'
})
export class RegisterPage {
loading: any;
regData = { username:'', password:'' };
constructor(public navCtrl: NavController, public navParams: NavParams, public authService: AuthService, public loadingCtrl: LoadingController, private toastCtrl: ToastController) {}
doSignup() {
this.showLoader();
this.authService.register(this.regData).then((result) => {
this.loading.dismiss();
this.navCtrl.pop();
}, (err) => {
this.loading.dismiss();
this.presentToast(err);
});
}
showLoader(){
this.loading = this.loadingCtrl.create({
content: 'Authenticating...'
});
this.loading.present();
}
presentToast(msg) {
let toast = this.toastCtrl.create({
message: msg,
duration: 3000,
position: 'bottom',
dismissOnPageChange: true
});
toast.onDidDismiss(() => {
console.log('Dismissed toast');
});
toast.present();
}
}修改 pages/register/register.html 如下：
<ion-content padding>
<h2>Register Here</h2>
<form (submit)="doSignup()">
<ion-item>
<ion-label stacked>Username</ion-label>
<ion-input [(ngModel)]="regData.username" name="username" type="text" placeholder="Your username" ></ion-input>
</ion-item>
<ion-item>
<ion-label stacked>Password</ion-label>
<ion-input [(ngModel)]="regData.password" name="password" type="password" placeholder="Your password"></ion-input>
</ion-item>
<button ion-button block type="submit">
SignUp
</button>
</form>
</ion-content>4、登出和token检查
最后，在主页中添加一个退出登陆的功能，同时检查token，如果没有token跳转到登陆页面。
编辑 pages/tabs/tabs.ts 文件如下：
import { Component } from '@angular/core';
import { NavController } from 'ionic-angular';
import { HomePage } from '../home/home';
import { AboutPage } from '../about/about';
import { ContactPage } from '../contact/contact';
import { LoginPage } from '../login/login';
@Component({
templateUrl: 'tabs.html'
})
export class TabsPage {
// this tells the tabs component which Pages
// should be each tab's root Page
tab1Root: any = HomePage;
tab2Root: any = AboutPage;
tab3Root: any = ContactPage;
constructor(public navCtrl: NavController) {
if(!localStorage.getItem("token")) {
navCtrl.setRoot(LoginPage);
}
}
}编辑 pages/home/home.ts 文件如下：
import { Component } from '@angular/core';
import { AuthService } from '../../providers/auth-service';
import { NavController, App, LoadingController, ToastController } from 'ionic-angular';
import { LoginPage } from '../login/login';
@Component({
selector: 'page-home',
templateUrl: 'home.html'
})
export class HomePage {
loading: any;
isLoggedIn: boolean = false;
constructor(public app: App, public navCtrl: NavController, public authService: AuthService, public loadingCtrl: LoadingController, private toastCtrl: ToastController) {
if(localStorage.getItem("token")) {
this.isLoggedIn = true;
}
}
logout() {
this.authService.logout().then((result) => {
this.loading.dismiss();
let nav = this.app.getRootNav();
nav.setRoot(LoginPage);
}, (err) => {
this.loading.dismiss();
this.presentToast(err);
});
}
showLoader(){
this.loading = this.loadingCtrl.create({
content: 'Authenticating...'
});
this.loading.present();
}
presentToast(msg) {
let toast = this.toastCtrl.create({
message: msg,
duration: 3000,
position: 'bottom',
dismissOnPageChange: true
});
toast.onDidDismiss(() => {
console.log('Dismissed toast');
});
toast.present();
}
}Home页面的登出按钮：
<ion-header>
<ion-navbar>
<button ion-button clear (click)="logout()">
<ion-icon name="log-out"></ion-icon>
</button>
<ion-title>Home</ion-title>
</ion-navbar>
</ion-header>好了，测试一下：
ionic serve --lab整个功能界面应该是这个样子的：
Rest API 功能界面
五一更一发，更多内容请查看百度阅读： Ionic 2 实例开发
序 Ionic 2 安装 环境安装 创建Ionic项目 测试运行项目 Ionic 2 项目结构 ./src/index.html ./src/ ./src/app/app.html Ionic 2 应用剖析 0 开始之前 1 创建一个新的Ionic 2 应用 2 目录结构 Root Components 模版 App Module 总结 Ionic 2 添加页面 创建页面 创建附加页面 使用 Ionic 2 开发Todo应用 0 开始之前 1 创建新的Ionic 2工程 2. 设置主页（Home page） 3 持久化数据保存 4 总结 Ionic 2 实现列表滑动删除按钮 1.创建Ionic2应用 2.准备列表数据 3.修改主页（HOME）的模版 4.创建方法删除数据 5.添加一个编辑按钮 总结 Angular 2 新概念和语法 Angular 2 & Ionic 2 概念 Angular 2 语法 Ionic 2 导航简明指南 入栈出栈（Pushing and Popping） 什么时候使用导航栈？什么时候使用rootPage？ Ionic 2 基本导航功能 总结 Ionic 2 中使用管道处理数据 1.生成一个新应用 2.创建一个管道 3.使用管道 总结 Ionic 2 中使用HTTP与远程服务器交互数据 开始之前 我们需要一个列表 3.获取远程数据 4.推送数据到服务器 总结 Ionic 2 中的样式与主题 Ionic 2主题简介 创建Ionic 2应用主题的方式 没有苹果电脑打包iOS平台的 Ionic 2程序 开始之前 1 创建一个Ionic 2的应用 2 建立Ionic Cloud 3 生成证书和创建一个安全概要 4 使用Ionic Package 命令 总结 Ionic 2中使用百度地图和Geolocation 新建项目 加入百度地图SDK库 加载地图 获取定位 坐标转换 地图定位 激活百度地图导航 总结 在Ionic 2 Native中使用Cordova插件 Ionic 和 Cordova 的误解 使用Ionic Native 使用没有包含在Ionic Native中的插件 Ionic 2 中添加图表 1. 照例新建一个项目 2. 安装Chart.js 3. 在模版中使用 总结 Ionic 2 中的创建一个闪视卡片组件 1. 创建一个新的应用作为例子 2. 什么是组件？ 3. 创建组件模版 4. 创建组件类 5. 创建 CSS 动画 6. 添加组件到模版 总结 Ionic 2 中创建一个照片倾斜浏览组件 1. 创建一个新的应用 2. 实现照片倾斜浏览组件 3. 使用照片倾斜浏览组件 总结 Ionic 2 中实现一个简单的进度条 理解 自定义组件中的 Input 和 output 1.创建一个新的应用 2.创建组件 修改src/components/progress-bar/progress-bar.ts如下： 3.使用这个组件 总结 使用VS Code在Chrome中调试Ionic 2 优化你的Ionic2应用 打开Angular产品模式 修改(click) 为 (tap) 使用 --prod 参数编译 总结 Ionic 2 开发遇到的问题及处理集 Console.log 不输出 编译Android报错：compileArmv7DebugJavaWithJavac 一些更新命令 错误：Error: listen EADDRINUSE 0.0.0.0:53703