我有一个带有侧菜单和所有内容的离子项目。现在我想以简单的方式添加并登录很酷的形式,例如http://ionicmaterial.com/但是这个问题我没有看到任何示例如何在令人兴奋的项目中添加它,它将首先加载登录表单,然后重定向到常规页面。我的项目如下所示:
app.config(function ($stateProvider, $urlRouterProvider) {
$stateProvider
.state('app', {
url: "/app",
abstract: true,
templateUrl: "templates/menu.html",
controller: 'AppCtrl'
})
.state('app.placeslists', {
url: "/placeslists",
views: {
'menuContent': {
templateUrl: "templates/placeslists.html",
controller: 'PlaceslistsCtrl'
}
}
})
如何添加具有身份验证(令牌)的登录页面,它将首先加载,以及如何以简单的方式添加登录页面的材料。
谢谢!!!
为了实现登录,您将需要这些东西
- 登录状态
- 登录模板
- 处理令牌的逻辑
$stateProvider
.state('Login', {
url: "/Login",
templateUrl: "app/templates/Login.html"
})
<ion-view view-title="Login" align-title="left">
<ion-content style="background: url(img/login.jpg) center; background-size: cover;">
<div class="hero no-header flat">
<div class="content">
<div class="app-icon"></div>
<h1>Thronester</h1>
</div>
</div>
<div class="list">
<ion-md-input placeholder="Username" highlight-color="balanced" type="text" ng-model='user.username'></ion-md-input>
<ion-md-input placeholder="Password" highlight-color="energized" type="password" ng-model='user.password'></ion-md-input>
</div>
<div class="padding">
<button ui-sref="app.profile" class="button button-full button-assertive ink">Login</button>
</div>
<div class="button-bar social-login">
<button class="button button-small button-border icon-left ion-social-google button-assertive-900" ng-click='DoLogin(user)'>Login</button>
</div>
</ion-content>
</ion-view>
在 DoLogin 函数中,您需要处理 hit 您的 API 进行登录,并接收您的令牌。您需要存储此令牌。我使用 SQLlite 插件将我的令牌存储到令牌表中。有不同的存储令牌的方法。
- SQLite 插件
- 本地存储
- 网络数据库
- 文件 ng科尔多瓦
等等,我可以使用SQLlite为您提供代码片段。
var DB = window.sqlitePlugin.openDatabase({name: "Token.db", location: 1})
var CreateQuery = 'CREATE TABLE IF NOT EXISTS Token (id integer primary key, access_token TEXT)'
var InsertQuery = 'INSERT INTO Token (access_token) VALUES (?)'
var selectQuery = 'SELECT access_token FROM Token WHERE id = 1'
var Token = // the token you get from your server, make a $http resquest and get it
$cordovaSQLite.execute( DB,CreateQuery ).then(function () {
//table created
})
$cordovaSQLite.execute(DB, InsertQuery, [Token]).then(function(){
// token inserted into table
})
$cordovaSQLite.execute(DB, selectQuery).then(function (res) {
//getting token from table
$rootScope.TokenFromTable = res.rows.item(0).access_token;
})
不要只是从代码中复制粘贴(它不起作用),您需要构建有关放置所有这些代码的位置和顺序的逻辑。
收到 authToken 后,您可以将其设置为所有$http请求的公共标头,当用户单击注销时,只需删除表或删除数据库即可。(浏览链接中的博客)
您可以在应用程序中添加新的状态登录.js这将加载login.html和控制器并通过defalut加载它,如下所示:
.state('login', { 网址: "/登录", 模板网址:"templates/login.html", 控制器:"登录控制" })
如果上述状态都不匹配,则将其用作回退 $urlRouterProvider.否则('/login');
在登录控制器中,当您成功登录时,您可以使用$state.go('app.placeslists')将其重定向到任何页面;它将加载常规页面。
我在最后找到了所有带有演示的信息您还可以在以下位置找到:https://github.com/zachsoft/Ionic-Material