Question

我正在使用来自Firebase的twitter auth处理具有用户特定内容的小型应用程序。我已经设置了所有auth，但是当用户登录时，他们被迫重新加载该站点的页面以识别他们具有身份验证。例如：用户从登录页面登录并通过$authWithOAuthPopup使用他们的Twitter帐户登录，并立即通过我们的文章提要定向到视图。用户有权将文章保存到他们的帐户，但问题是他们在重定向我的应用程序以识别其身份验证后被迫重新加载页面。任何人都知道为什么会发生这种情况，因为这是赫拉让我疯了。我正在使用的图书馆是angularJS（controllerAs语法）angularFire和ui.rotuer

我的auth工厂

readyRead.factory('angularAuth', function ($firebaseArray, $firebaseAuth, $firebaseObject, $state) {
var base = new Firebase('https://readyread.firebaseio.com/')
var users = $firebaseObject(base.child('users'))
var articles = $firebaseArray(base.child('articles'))
var authObj = $firebaseAuth(base)
var authenticated = authObj.$getAuth()
return {
    getAuth: authenticated,
    logIn: function () {
        authObj.$authWithOAuthPopup("twitter").then(function (authData) {
            $state.go('feed.category')
            console.log("Logged in as:", authData.uid);
        }).catch(function (error) {
            console.error("Authentication failed:", error);
        })
    },
    logout: function () {
        authObj.$unauth()
    },
    updateUser: base.onAuth(function (authData) {
        if (authData) {
            base.child('users').child(authData.uid).update({
                name: authData.twitter.username,
                displayName: authData.twitter.displayName,
                picture: authData.twitter.cachedUserProfile.profile_image_url,
                isMember: true
            })
          $('.nav-social').prepend(authData.twitter.username)
          $('.social-icon').attr('src', authData.twitter.cachedUserProfile.profile_image_url)
        }
    }),
    saveArticle: function (saved) {
        var userArticles = $firebaseArray(base.child('articles').child(authenticated.uid))
        if (authenticated) {
            userArticles.$add(saved).then(function (base) {
                console.log(saved)
            })
        } else {
            console.log('log in to use this feature')
        }
    }
} })

我的routes

readyRead.config(function ($stateProvider, $urlRouterProvider) {
$urlRouterProvider.otherwise("/login");
$stateProvider
    .state('login', {
        url: '/login',
        templateUrl: './login.html',
        controller: 'LoginController as login'
    })
    .state('feed', {
        url: '/feed',
        templateUrl: './feed.html',
        controller: 'FeedController as feed'
    })
    .state('feed.read', {
        url: '/read',
        templateUrl: './feed.read.html',
        controller: 'FeedController as feed'
    })
    .state('feed.title', {
        url: '/title',
        templateUrl: './feed.title.html',
        controller: 'FeedController as feed'
    })
    .state('feed.category', {
        url: '/category',
        templateUrl: './feed.category.html',
        controller: 'FeedController as feed'
    })
    .state('userProfile', {
        url: '/userProfile',
        templateUrl: './userProfile.html',
        controller: 'UserProfileController as user'
    }) 
})

controllers这些控制器内部的很多操作都需要重新加载页面才能看到auth。

var readyRead = angular.module('readyRead', ['ngAnimate', 'restangular','firebase', 'ui.router'])
readyRead.config(function(RestangularProvider){
  RestangularProvider.setBaseUrl('https://www.kimonolabs.com/api/')
  RestangularProvider.setDefaultRequestParams('jsonp',{callback: 'JSON_CALLBACK'})
  RestangularProvider.setDefaultRequestParams({apikey: 'lxZzI5UKXbWL2JK3DL0U2g2uCfMjFUgd'})
})

readyRead.controller('LoginController', function (angularAuth) {
  this.login = angularAuth.logIn
  this.auth = angularAuth.getAuth
  this.logout = angularAuth.logout
  if(this.auth){
    console.log('have auth')
  }else{
    console.log('no auth')
  }
})
readyRead.controller('FeedController', function(api,angularAuth){
  var self = this;
  api.then(function(data){
    self.articles=data.results.collection1
    self.save = angularAuth.saveArticle
  })
})
readyRead.controller('UserProfileController', function(angularAuth,$firebaseObject,$firebaseArray){
  this.auth = angularAuth.getAuth
  var self = this;
  var userBase = $firebaseObject(new Firebase('https://readyread.firebaseio.com/users/'+this.auth.uid))
  var userHistory = $firebaseArray(new Firebase('https://readyread.firebaseio.com/articles/'+this.auth.uid))
  userBase.$loaded()
  .then(function(data) {
    self.name = data.name
    self.avatar = data.picture
    console.log(self.avatar)
  });
  userHistory.$loaded()
  .then(function(data){
    self.list = data
    console.log(self.list)
  })
})

Answer 1

您决不更新authenticated。您在初始化工厂时最初设置其值，然后再也不会。当用户从未经身份验证的状态访问时，auth.$authObj()会返回null（$authObj docs）。在logIn中验证成功后，您需要再次设置它。

如果您在logIn的成功处理程序中添加此内容，则用户不必再刷新：

authenticated = authData.$authObj()

Answer 2

分配变量

users = $firebaseObject(base.child('users'))
articles = $firebaseArray(base.child('articles'))

登录成功。那就是......

authObj.$authWithOAuthPopup("twitter").then(function (authData) {
    // <--------------- ...here
    $state.go('feed.category')
    console.log("Logged in as:", authData.uid);
}).catch(function (error) {
    console.error("Authentication failed:", error);
})

必须为Firebase重新加载页面才能识别身份验证

2 个答案: