ionic开发app 对于用户登录信息的存储用怎样的方案比较好

因为在 app 中保持 session 很烦而且浪费，所以 app 通常使用 token based authentication （太长了，后面请允许我叫它 TBA :-）来做认证。

ionic 使用前端的技术栈，但思路得按 app 的来。简单答的话你可以搜索 json web token 作为一个起点。

为什么说 session 在 app 上不好用

我们都知道 http 是无状态的，而 session 却为浏览器与服务器提供了保持“会话”的能力。而这种好处是有代价的。我真是爱死这句话了。 session 的原理就不用我再多嘴了，总之就是浏览器与服务器需要做一些额外的工作，用于保证一次会话里的所有连接符合某种协议，才能达到效果。

传统网站里，这部分额外的工作是由浏览器承担的。浏览器会完成所有的脏活累活，前端只管用就好了。但在 app 里面，谁来管这些事情？难道说每一个需要访问鉴权 api 的 app ，哪怕再小的需要，都得用上一个小浏览器？这种方案看上去并不能接受。

既然保持状态的代价不能接受，那不保持好了。让 http 回到它最原始的样子。现在问题变成了：没有状态的情况下如何鉴权？答案倒也简单：每次连接都带上用户名密码。。。

token based authentication

听起来很糟糕，也确实不能这样做。。。这就是 BAT TBA 派上用场的时候了。我们只向服务器出示一次用户名密码，服务器认证了我们的身份之后，生成一个字符串“令牌”（token）。 app 拿到令牌后，访问每一个 api 都附带上令牌，而 api 看到令牌后，就会知道你是有权限访问它的，进而返回数据。

这样就避免了多次传递用户密码这种敏感信息，而这个 token 的存储位置就很多选择了， ionic 的话还可以用到浏览器的 window.localStorage 。

Ionic 集成 jpush(极光)推送之 IOS 篇

说明：这篇文章已经年代久远，其中一些地方可能已经无效，仅做参考

极光推送官方版的 phonegap 插件在这里7。

由于官方版插件 ios 版暂时没有打开通知的方法，所以在官方基础上修改了下，修改后的插件放在了这里4，下面说明以修改后的插件为准。（感谢极光官方大神viper耐心帮助，同时也参考了下@lanceli1大神的cnodejs-ionic7项目）

极光账户设置部分可以参考小和尚的这篇9分享。

下面主要说明项目代码部分修改。

新建一个 ionic项目

$ ionic start --id com.ionichina.ionicjpush ionic_jpush tabs

注：修改 id 为自己应用的 Bundle identifier

添加 IOS 平台

$ cd ionic_jpush

$ ionic platform add ios

安装插件

$ ionic plugin add

等待时间比较长，你也可以像小和尚文章9里介绍的先下载下来，再安装，但这个过程是跑不了的

（接下来，蛋疼的事情开始了）

修改配置

修改: ionic_jpush\plugins\cn.jpush.phonegap.JPushPlugin\src\ios\PushConfig.plist

修改对应的APP_KEY和CHANNEL(渠道)为你自己申请的值，

注意

确保有如下代码，不然后面 Xcode 运行会警告：

<key>APS_FOR_PRODUCTION</key><string>0</string>

在 js 中添加通知实现

在 app.js 最后添加一个 push 工厂(参考了@lanceli1大神的Ccnodejs-ionic7项目)

 .factory('Push', function() {    var push   return {      setBadge: function(badge) {        if (push) {          console.log('jpush: set badge', badge)

         plugins.jPushPlugin.setBadge(badge)

       }

     },      setAlias: function(alias) {        if (push) {          console.log('jpush: set alias', alias)

         plugins.jPushPlugin.setAlias(alias)

       }

     },      check: function() {        if (window.jpush &&push) {

         plugins.jPushPlugin.receiveNotificationIniOSCallback(window.jpush)         window.jpush = null

       }

     },      init: function(notificationCallback) {        console.log('jpush: start init-----------------------')

       push = window.plugins &&window.plugins.jPushPlugin       if (push) {          console.log('jpush: init')

         plugins.jPushPlugin.init()

         plugins.jPushPlugin.setDebugMode(true)

         plugins.jPushPlugin.openNotificationInAndroidCallback = notificationCallback

         plugins.jPushPlugin.receiveNotificationIniOSCallback = notificationCallback

       }

     }

   }

 })

在 app.js 的 run 函数里定义通知回调函数

记得在 run 函数里引用 Push 先

 // push notification callback

 var notificationCallback = function(data) {    console.log('received data :' + data)   var notification = angular.fromJson(data)   //app 是否处于正在运行状态

   var isActive = notification.notification   // here add your code

   //ios

   if (ionic.Platform.isIOS()) {      window.alert(notification)

   } else { //非ios(android)

   }

 }

在 $ionicPlatform.ready 里进行初始化

//初始化Push.init(notificationCallback)//设置别名Push.setAlias("12345678")

编译 IOS 项目

$ ionic build ios

（接下来，更蛋疼的事情开始了）

修改配置 IOS 项目（不要问我为啥）

修改 AppDelegate.m，

添加

#import "APService.h"#import "JPushPlugin.h"  //viper

didFinishLaunchingWithOptions函数中添加

   // Required#if __IPHONE_OS_VERSION_MAX_ALLOWED >__IPHONE_7_1

   if ([[UIDevice currentDevice].systemVersion floatValue] >= 8.0) {        //可以添加自定义categories

       [APService registerForRemoteNotificationTypes:(UIUserNotificationTypeBadge |                                                       UIUserNotificationTypeSound |                                                       UIUserNotificationTypeAlert)

                                          categories:nil]

   } else {        //categories 必须为nil

       [APService registerForRemoteNotificationTypes:(UIRemoteNotificationTypeBadge |                                                       UIRemoteNotificationTypeSound |                                                       UIRemoteNotificationTypeAlert)

                                          categories:nil]

   }#else

   //categories 必须为nil

   [APService registerForRemoteNotificationTypes:(UIRemoteNotificationTypeBadge |                                                   UIRemoteNotificationTypeSound |                                                   UIRemoteNotificationTypeAlert)

                                      categories:nil]#endif

   // Required

   [APService setupWithOption:launchOptions]

didRegisterForRemoteNotificationsWithDeviceToken中添加

// Required[APService registerDeviceToken:deviceToken]

[APService setDebugMode]

添加函数

- (void)application:(UIApplication *)application didReceiveRemoteNotification:(NSDictionary *)userInfo {    // Required

   [APService handleRemoteNotification:userInfo]   BOOL isActive   if (application.applicationState == UIApplicationStateActive) {

       isActive = TRUE

   } else {

       isActive = FALSE

   }    NSDictionary *dict=[[NSMutableDictionary alloc] initWithDictionary:userInfo]

   

   [dict setValue: [[NSNumber alloc] initWithBool:isActive] forKey:@"isActive" ]

   

   [[NSNotificationCenter defaultCenter] postNotificationName:kJPushPlugReceiveNotificaiton

                                                       object:dict] //viper

   

   }

OC 代码算是完事儿，然后就是配置

修改项目 Capabilities，打开 Background Modes，勾选最后一项Remote notications

设置证书，这个就不教了，网上一大堆

Xcode 这边就算配置完了

接下就是设置一些Xcode常规 *** 作，编译运行，从极光官方控制台发送一条通知，然后查看Xcode控制台，应该就会有推送的通知数据打印了。

下面的事儿你自己应该搞的定。

Angular4+Ionic3-企业微信应用开发

一、搭建Ionic3项目工程

（1）、配置环境：

node安装：参照node官网（ http://nodejs.cn/download/ ）

cnpm淘宝镜像安装：

npm install -g cnpm --registry=https://registry.npm.taobao.org

ionic安装：cnpm install -g ionic

（2）、创建项目：

创建带tab栏项目：Ionic start project tabs

创建空白页项目：Ionic start project blank

（3）、运行项目：

安装依赖：cnpm install

启动项目：ionic serve

二、企业微信应用开发步骤

（1）、企业微信API：

    推荐参考： https://work.weixin.qq.com/api/doc#90000/90003/90556

（2）、具体开发

    1、项目目录构成

    2、引入企业微信相关文件

    a、在index.html页面，引入微信的js文件。

    b、因项目使用的是亚马逊的服务器，所以要在开发企业微信时，需要使用由API Gateway 为 REST API 生成的 JavaScript 开发工具包（此包是由后端生成，前端引用），从后端处获取到JavaScript包后，放置在assets文件夹下，在index.html页面中一一引入这些js文件。

    c、从后端处获取的js文件，给改文件下的config加上accessKey和secretKey。

    3、调用企业微信API的文件配置

        在app文件夹下，新建一个d.ts文件，在该文件下定义全局的变量，例如wechat.d.ts，具体如下：

        配置完成后，可在具体页面中进行企业微信API的调用，例如监听页面返回 *** 作：

    4、获取code

    在index.html页面，使用缓存的方式存储code，如下：

    5、在app.component.ts文件下，调用从后端获取的api文件下的方法，获取token、个人信息等等，以下就是怎么调用后端企业微信接口，获取token、个人信息，在本项目中，所调用的接口全部是取自后端集成的JavaScript包。

三、开发中遇到的一些问题

（1）、集成js-sdk失败的问题，出现invalid signature签名抛错。

    处理：是URL的问题，根据js-sdk上面签名算法的生成上，URL参数是为解码后的URL，后端没解码URL，所以导致签名抛错，前端传给后端是通过encodeURIComponent()方法转码过后的URL，而后端拿到前端转码过后的URL，是需要解码才能生成正确的签名。

---