3

我有一个带有侧边菜单的离子项目。现在我想以简单的方式添加并登录很酷的表单，例如 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'
                }
            }
        })

如何添加带有身份验证（令牌）的登录页面，它将首先加载，以及如何以简单的方式添加登录页面的材料。

谢谢！！！

4

3 回答 3

9

为了实现登录，你需要这些东西

  1. 登录状态
  2. 登录模板
  3. 处理令牌的逻辑

 $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 函数中，您需要处理您的 API 以进行登录，并接收您的令牌。您需要存储此令牌。我使用 SQLlite 插件将我的令牌存储到令牌表中。存储令牌有不同的方式。

  1. SQLite 插件
  2. 本地存储
  3. WebSQL
  4. 归档 ngCordova

还有更多，我可以为您提供使用 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 请求的公共标头，当用户单击注销时，只需删除表或删除数据库。（浏览链接中的博客）

于 2015-04-29T05:17:52.250 回答
1

我在最后找到了所有带有演示的信息，您也可以在以下位置找到： https ://github.com/zachsoft/Ionic-Material

于 2015-04-26T06:58:11.633 回答
1

您可以在 app.js 中添加新的状态登录，它将加载 login.html 和控制器并通过默认值加载它，例如：

.state('login', { url: '/login', templateUrl: 'templates/login.html', 控制器: 'LoginCtrl' })

// 如果以上状态都不匹配，则将其用作后备 $urlRouterProvider.otherwise('/login');

在登录控制器中，当您成功登录时，您可以使用 $state.go('app.placeslists'); 将其重定向到任何页面；它将加载常规页面。

于 2015-04-25T21:03:01.327 回答