Ionic2 Rest 认证

今天，我们使用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

转载请注明：
http://www.techcave.cn
http://tedum.iteye.com

最后编辑于：2017.12.07 02:03:59

人面猴
序言：七十年代末，一起剥皮案震惊了整个滨河市，随后出现的几起案子，更是在滨河造成了极大的恐慌，老刑警刘岩，带你破解...
沈念sama阅读 211,948评论 6赞 492
死咒
序言：滨河连续发生了三起死亡事件，死亡现场离奇诡异，居然都是意外死亡，警方通过查阅死者的电脑和手机，发现死者居然都...
沈念sama阅读 90,371评论 3赞 385
救了他两次的神仙让他今天三更去死
文/潘晓璐我一进店门，熙熙楼的掌柜王于贵愁眉苦脸地迎上来，“玉大人，你说我怎么就摊上这事。” “怎么了？”我有些...
开封第一讲书人阅读 157,490评论 0赞 348
道士缉凶录：失踪的卖姜人
文/不坏的土叔我叫张陵，是天一观的道长。经常有香客问我，道长，这世上最难降的妖魔是什么？我笑而不...
开封第一讲书人阅读 56,521评论 1赞 284
港岛之恋（遗憾婚礼）
正文为了忘掉前任，我火速办了婚礼，结果婚礼上，老公的妹妹穿的比我还像新娘。我一直安慰自己，他们只是感情好，可当我...
茶点故事阅读 65,627评论 6赞 386
恶毒庶女顶嫁案：这布局不是一般人想出来的
文/花漫我一把揭开白布。她就那样静静地躺着，像睡着了一般。火红的嫁衣衬着肌肤如雪。梳的纹丝不乱的头发上，一...
开封第一讲书人阅读 49,842评论 1赞 290
城市分裂传说
那天，我揣着相机与录音，去河边找鬼。笑死，一个胖子当着我的面吹牛，可吹牛的内容都是我干的。我是一名探鬼主播，决...
沈念sama阅读 38,997评论 3赞 408
双鸳鸯连环套：你想象不到人心有多黑
文/苍兰香墨我猛地睁开眼，长吁一口气：“原来是场噩梦啊……” “哼！你这毒妇竟也来了？” 一声冷哼从身侧响起，我...
开封第一讲书人阅读 37,741评论 0赞 268
万荣杀人案实录
序言：老挝万荣一对情侣失踪，失踪者是张志新（化名）和其女友刘颖，没想到半个月后，有当地人在树林里发现了一具尸体，经...
沈念sama阅读 44,203评论 1赞 303
护林员之死
正文独居荒郊野岭守林人离奇死亡，尸身上长有42处带血的脓包…… 初始之章·张勋以下内容为张勋视角年9月15日...
茶点故事阅读 36,534评论 2赞 327
白月光启示录
正文我和宋清朗相恋三年，在试婚纱的时候发现自己被绿了。大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
茶点故事阅读 38,673评论 1赞 341
活死人
序言：一个原本活蹦乱跳的男人离奇死亡，死状恐怖，灵堂内的尸体忽然破棺而出，到底是诈尸还是另有隐情，我是刑警宁泽，带...
沈念sama阅读 34,339评论 4赞 330
日本核电站爆炸内幕
正文年R本政府宣布，位于F岛的核电站，受9级特大地震影响，放射性物质发生泄漏。R本人自食恶果不足惜，却给世界环境...
茶点故事阅读 39,955评论 3赞 313
男人毒药：我在死后第九天来索命
文/蒙蒙一、第九天我趴在偏房一处隐蔽的房顶上张望。院中可真热闹，春花似锦、人声如沸。这庄子的主人今日做“春日...
开封第一讲书人阅读 30,770评论 0赞 21
一桩弑父案，背后竟有这般阴谋
文/苍兰香墨我抬头看了看天上的太阳。三九已至，却和暖如春，着一层夹袄步出监牢的瞬间，已是汗流浃背。一阵脚步声响...
开封第一讲书人阅读 32,000评论 1赞 266
情欲美人皮
我被黑心中介骗来泰国打工，没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留，地道东北人。一个月前我还...
沈念sama阅读 46,394评论 2赞 360
代替公主和亲
正文我出身青楼，却偏偏与公主长得像，于是被迫代替她去往敌国和亲。传闻我的和亲对象是个残疾皇子，可洞房花烛夜当晚...
茶点故事阅读 43,562评论 2赞 349

Ionic2 Rest 认证

1、创建Ionic 2 APP

2、创建服务

3、创建登陆和注册页面

4、登出和token检查

推荐阅读更多精彩内容