- html - 出于某种原因,IE8 对我的 Sass 文件中继承的 html5 CSS 不友好?
- JMeter 在响应断言中使用 span 标签的问题
- html - 在 :hover and :active? 上具有不同效果的 CSS 动画
- html - 相对于居中的 html 内容固定的 CSS 重复背景?
我已更改官方 AngularJS 文档以使用 Firebase(手机教程)。
这是我的应用程序的路由器:
angular.module('phonecat', ['firebase']).
config(['$routeProvider', function($routeProvider) {
$routeProvider.
when('/phones', {
templateUrl: 'partials/phone-list.html',
controller: PhoneListCtrl,
authRequired: false,
pathTo: '/phones'
}).
when('/phones/:age', {
templateUrl: 'partials/phone-detail.html',
controller: PhoneDetailCtrl,
authRequired: true,
pathTo: '/phones/:phoneId'
}).
when('/login', {
templateUrl: 'partials/login.html',
controller: LoginCtrl,
authRequired: false,
pathTo: '/login'
}).
otherwise({
redirectTo: '/phones'
}); }]);
这就是 Controller 的样子 - 但它可能是不正确的。登录函数被调用,但我不知道下一步该做什么。我应该如何将用户从登录页面重定向到phone-detail.html页面?
'use strict';
function PhoneListCtrl($scope, angularFire, angularFireAuth) {
var url = 'https://<link>.firebaseio.com/';
var promise = angularFire(url, $scope, 'phones', []);
angularFireAuth.initialize(url, {scope: $scope, name: "user"});
}
function PhoneDetailCtrl($scope, $routeParams, angularFire, angularFireAuth) {
var url = 'https://<link>.firebaseio.com/' + $routeParams.age;
angularFireAuth.initialize(url, {scope: $scope, path: "/login"});
$scope.$on("angularFireAuth:login", function(evt, user) {
var promise = angularFire(url, $scope, 'phone', {});
});
$scope.$on("angularFireAuth:logout", function(evt) {
console.log("you are logged out.");
});
$scope.$on("angularFireAuth:error", function(evt, err) {
console.log(err);
});
}
function LoginCtrl($scope, angularFire, angularFireAuth) {
var url = 'https://<link>.firebaseio.com';
$scope.form = {};
$scope.login = function() {
console.log("called");
var username = $scope.form.username;
var password = $scope.form.password;
angularFireAuth.login('password', {
email: username,
password: password,
rememberMe: false
});
};
}
login.html 如下所示:
<input type="text" name="username" ng-model="form.username"><br>
<input type="text" name="password" ng-model="form.password"><br>
<button name="login" id="login" ng-click="login()">login</button>
我想要实现的是:
我正在努力解决第 3 点和第 4 点。
更新
在 Anant 的评论之后——我发现了一些非常有趣的事情。我向 angularFire.js 添加了一些调试消息,目前我在上面的 Controller 中将 authRequired 从 true 更改为 false。
如果导航到/phones - 我会按预期从 firebase 返回一个列表。里面_loggedIn()
我添加了console.log(user)
它返回一个用户对象(另外,在初始化内部我添加了一条调试语句:https://github.com/firebase/angularFire/blob/master/angularFire.js#L437——两者都确认我有一个有效的用户,已经登录。
如果我点击一个项目,我会得到我所期望的 - 用户名和实际页面加载(请参阅下面的 html)。如果刷新该页面 (http:///phones/#/0),我会再次获得正确的页面,并且在控制台中,我仍然会看到有效的用户对象,表明用户仍处于登录状态
这是phone-list.html 和phone-details.html 的HTML:
phone-list.html
<div class="container-fluid">
<div class="row-fluid">
<div class="span4">
<!--Body content-->
<ul class="phones">
<li ng-repeat="phone in phones">
<a href="#/phones/{{phone.age}}">{{phone.id}}</a>
<p>{{phone.snippet}}</p>
</li>
</ul>
</div>
</div>
</div>
phone-detail.html
<span ng-show="user">
{{user.email}} | <a ng-click="logout()">Logout</a>
you are look looking at {{ phone.name }}
</span>
<span ng-hide="user">
login pls!
</span>
以及 JSON 中的片段(现在是 Firebase 的一部分):
[
{
"age": 0,
"id": "motorola-xoom-with-wi-fi",
"imageUrl": "img/phones/motorola-xoom-with-wi-fi.0.jpg",
"name": "Motorola XOOM\u2122 with Wi-Fi",
"snippet": "The Next, Next Generation\r\n\r\nExperience the future with Motorola XOOM with Wi-Fi, the world's first tablet powered by Android 3.0 (Honeycomb)."
},
{
"age": 1,
"id": "motorola-xoom",
"imageUrl": "img/phones/motorola-xoom.0.jpg",
"name": "MOTOROLA XOOM\u2122",
"snippet": "The Next, Next Generation\n\nExperience the future with MOTOROLA XOOM, the world's first tablet powered by Android 3.0 (Honeycomb)."
}...etc
如果我将 authRequired 更改回 true - 如果用户对象可用,那么我会陷入页面加载的无限循环 - 首先是/login,然后它会自动重定向到/phone/0 并立即返回到/login再次发生,直到浏览器崩溃为止。
更新2
添加一些进一步的调试行并研究代码后,我想出了这个解决方案:
将初始化添加到LoginCtrl:
var url = 'https://<link>.firebaseio.com/';
angularFireAuth.initialize(url, {scope: $scope});
在 angularFire.js 中,我注释掉了第 406 行和 407 行:
//this._redirectTo = null;
//this._authenticated = false;
在第 438 行周围添加了代码,基本上我添加了 this._authenticated = true
和this._redirectTo = $route.current.pathTo
- 以及this._authenticated = false
到 else 语句。
var client = new FirebaseSimpleLogin(this._ref, function(err, user) {
self._cb(err, user);
if (err) {
$rootScope.$broadcast("angularFireAuth:error", err);
} else if (user) {
this._authenticated = true;
this._redirectTo = $route.current.pathTo;
self._loggedIn(user)
} else {
this._authenticated = false;
self._loggedOut();
}
});
this._authClient = client;
},
这不起作用的唯一情况是当用户登录并且我导航到 http://<host>/#/login
时- $route.current.pathTo
将等于 /login
目前我还不能百分百确定如何克服这个问题。对这个 Anant 有什么想法吗?
最佳答案
我已在 GitHub 上打开第 72 期:https://github.com/firebase/angularFire/issues/72
暂时的临时解决方案是修改 angularFire.js 并:
从初始化函数中删除以下两行:
this._redirectTo = null;
this._authenticated = false;
修改 angularFire.js 第 438 行左右(var client
的声明)以读取以下内容:
var client = new FirebaseSimpleLogin(this._ref, function(err, user) {
self._cb(err, user);
if (err) {
$rootScope.$broadcast("angularFireAuth:error", err);
} else if (user) {
this._authenticated = true;
this._redirectTo = $route.current.pathTo;
self._loggedIn(user)
} else {
this._authenticated = false;
self._loggedOut();
}
});`
this._authClient = client;
},
如上所述,这几乎解决了所有问题 - 唯一的问题似乎是,如果存在有效的用户对象(即有人登录),导航到/login 应该将用户重定向到另一个页面,但目前什么也没有发生。 GitHub 问题应该很快就会有关于此的更多信息。
关于angularjs - 如何正确实现 angularFireAuth?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/17807895/
我想要一个包装 AngularFireAuth 服务的 AuthWrapper 服务。像这样。 // EDIT: Adding some import statements. import {Test
这个问题在这里已经有了答案: Firebase kicks out current user (19 个回答) 关闭 3 年前。 我使用带有 firebase 的 Angular 应用程序,并且我具
是否可以在 Firebase 中使用附加字段创建用户?在我的代码中,我可以使用“电子邮件”和“密码”创建它们。 this.af.auth.createUser({ name: formDa
我的 Angular 项目成功使用了 AngularFireAuth可从 @angular/fire 注入(inject)连接到本地 Firebase 身份验证模拟器。我使用这些资源作为我的实现的引用
我已更改官方 AngularJS 文档以使用 Firebase(手机教程)。 这是我的应用程序的路由器: angular.module('phonecat', ['firebase']). conf
我正在使用 Ionic4 和 @angular/fire 编写聊天应用程序代码,但在运行我的应用程序时出现白页和错误消息 (F12)。有人可以帮助我吗? 谢谢。 应用程序模块.ts import {
如何获取登录用户? 我正在这样做: console.log('正在登录...'); this.afAuth.auth.signInWithEmailAndPassword(this.email, th
亲爱的 stackoverflow 社区, 我有以下问题。我尝试将 FirebaseAuthentication 与 Angular7 一起使用,并尝试使用守卫保护路由,因此只有登录用户才能访问 /p
我有一个核心服务,它获取 firebase.auth obj 的实例并使用 getter 返回它。它很简单,如下所示: export class AuthService { ... const
我已经使用 AngularFire2 使用 jasmine/karma 为我的 Angular2 Web 应用程序创建了测试用例,但遇到了一个奇怪的错误,我无法调试。当我运行测试(检查应用程序组件是否
我有一个核心服务,它获取 firebase.auth obj 的实例并使用 getter 返回它。它很简单,如下所示: export class AuthService { ... const
我有一个 authService实例化时订阅 AngularFireAuth的可观察 authState并设置服务的内部(私有(private))属性authState . 所以我可以单元测试auth
有人知道 Angularfire 的新代码 - Angular 4 signInWithEmailAndPassword 方法吗? loginWithEmail(email: string, pass
我已经使用 Firebase 身份验证和 Cloud Fire Store 建立了一个新的 Angular 6 项目。有一个登录页面,您可以在其中通过谷歌登录,用户数据保存在 Firestore 中(
我正在使用 Angular 和 firebase(使用 AngularFire2)构建一个应用程序。尝试在任何 firebase 可观察对象(FirebaseAuthObservable、Fireba
抱歉,我想不出更好的方法来包含所有信息...当我运行它时,我收到一条错误消息,内容如下。我已经按照 Ionic Docs 到 T,我无法弄清楚可能出了什么问题。 错误: No provider for
我知道以前曾有人问过这个问题,但我见过的解决方案都不适合我。我使用 firebase-ui 为我的 ionic 应用程序构建一个登录页面,我使用与其他应用程序完全相同的方法,并且它在那里工作。我安装了
我们尝试使用(Firebase/ionic2/angularjs2)通过谷歌身份验证登录。我们的代码 import { Component } from '@angular/core'; impor
我正在尝试将 angularFireAuth(来自 AngularFire - Firebase)与 ui-route 结合使用。 问题是 angularFireAuth 需要 ng-route 作为
我一直在兜圈子,试图对依赖于 AngularFireAuth 的服务 (AuthService) 进行单元测试。 我正在尝试找到一种方法来模拟或劫持 Observable AngularFireAut
我是一名优秀的程序员,十分优秀!