PhoneGap Hybrid APP 开发实战(3)：用户登录

上一篇：PhoneGap Hybrid APP 开发实战(2)：Framework7 + Vue.js模板

通过上一篇，现在我们已经可以快速开发跨平台应用了。

一般应用都会涉及到用户注册、登录等操作。
我们在开发桌面应用（Vue 2.0 起步(4)第二版 轻量级后端Flask用户认证 - 微信公众号RSS）时，早就用Flask-Security进行后端鉴权了，可以借鉴过来。

login-screen

对于手机端鉴权，可以采用以下策略：

• 还是SPA
• 首页index.html，显示公共信息+加密（会员）信息的框架
  • 后端定义 "/"为公共路由
  • 定义其它内容为加密路由，比如：/post/<post-id>
• 对于加密（会员）框架内的内容，提示用户登录后才能访问
  • 通过Token访问，如果返回是403无权限，说明没有登录
• Framework7有完善的Login-Screen，作为前端，直接拿来可用
  • 参考 http://framework7.io/docs/login-screen.html
• 后端对Login-Page的操作作出响应，返回Token，保存到LocalStorage
  • 参考 http://www.jianshu.com/p/f37871e31231
• 对于加密内容，通过Token访问
• 注销功能
  • Token有效期内，是一直可使用的。如果用户提前注销，可以在后端加一下“token_valid”字段，设为否就可以。鉴权时，Token + token_valid需要同时满足才通过。

思路有了，下面就是实现了。

0. 先升级一下各个组件

时间一长，各个组件都已经有较大更新了。先升级一下吧。

• Node.js
  https://nodejs.org/en/download/current/
  也会同步更新npm
• phonegap
  npm update -g phonegap
• framework7": "^1.6.5", "framework7-vue": "^0.9.3", "vue": "2.4.4"
  npm update -g framework7

也可以安装npm-check工具来检查

npm i -g npm-check
npm-check -u

1. 通过模板创建项目

phonegap create pg_auth --template cordova-template-framework7-vue-webpack
cd pg_auth
# 修改 package.json --> "framework7-vue": "^0.9.3"
npm install
phonegap run browser -- --lr

确保demo页面正常显示、工作。

2.

---

大家先自己动手试试。后续我把例子贴上来。
To be continued...