Question

我正在构建一个使用Devise进行身份验证的应用程序ROR，以及将angularJS前端链接到rails的angular-devise gem。当我来到应用程序的登录页面时，虽然控制台显示错误，我理解是设计尝试登录并且没有用户名或密码。我的问题是：为什么要登录？我承认我对Devise和Angular-devise如何工作的理解有限。所以我无法调试此错误。最重要的是，我有两次错误，我理解是设法尝试登录两次。我仍然不知道这些调用在哪里进行改进代码。

enter image description here

navCtrl.js

angular.module('theNotesApp')
    .controller('navCtrl', ['$scope', 'Auth', '$state', 'notesFactory', 'Flash', function($scope, Auth, $state, notesService, Flash) {
        $scope.signedIn = Auth.isAuthenticated;
        $scope.logout = Auth.logout;

        $scope.successAlert = function() {
            var message = '<strong> Well done!</strong>  You successfully read this important alert message.';
            Flash.create('success', message, 'custom-class');
            // First argument (success) is the type of the flash alert
            // Second argument (message) is the message displays in the flash alert
            // You can inclide html as message (not just text)
            // Third argument (custom-class) is the custom class for the perticular flash alert
        };

        // When the controller loads the function below is executed and the currentUser returned promise is set as
        //the value of $scope.user
        Auth.currentUser().then(function(user) {
            $scope.user = user;
        });
        $scope.$on('devise:new-registration', function(event, user){
            $scope.user = user;
        });
        $scope.$on('devise:login', function (event, user){
            $scope.user = user;
        });
        $scope.$on('devise:logout', function (event, user){
            $scope.user = {};
            $state.go('welcome');
            $scope.clear();
        });
    }])

authCtrl.js

angular.module('theNotesApp')
    .controller('authCtrl',['$scope', '$state', 'Auth',  function($scope, $state, Auth) {
        $scope.login = function() {
            Auth.login($scope.user).then(function () {
                $state.go('home');
            });
        };
        $scope.register = function() {
            Auth.register($scope.user).then(function () {

                $state.go('home');
            });
        };
    }])

application_controller.rb

![class ApplicationController < ActionController::Base
  # Prevent CSRF attacks by raising an exception.
  # For APIs, you may want to use :null_session instead.
  protect_from_forgery with: :exception

  respond_to :json

  before_action :configure_permitted_parameters, if: :devise_controller?

  def angular
    render 'layouts/application'
  end

  def configure_permitted_parameters
    devise_parameter_sanitizer.for(:sign_up) << :username
  end

end][3]

application.html.erb

<!DOCTYPE html>
<html>
<head>
  <title>The Notes App</title>
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.2.19/angular.min.js"></script>
  <script src="http://cdnjs.cloudflare.com/ajax/libs/angular-ui-router/0.2.10/angular-ui-router.js"></script>
  <!--jquerytag must be on top as it's required for bootstrap.min.js-->
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
  <!--javascript plugins -->
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js"></script>
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css">
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap-theme.min.css">

  <%= stylesheet_link_tag    'application', media: 'all' %>
  <%= javascript_include_tag 'application' %>
  <%= csrf_meta_tags %>
</head>

<body ng-app="theNotesApp">
<nav class="navbar navbar-default"  ng-controller="navCtrl" ng-show="signedIn()"  >
  <div class="container-fluid">
    <div class="navbar-header">
      <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1">
        <span class="sr-only">Toggle navigation</span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
      </button>
      <a class="navbar-brand" href="#/home">The Notes App</a>
    </div>
    <div class="collapse navbar-collapse"  id="bs-example-navbar-collapse-1">
      <ul class="nav navbar-nav navbar-right">
        <li><a href="#/home" >+ New Note</a></li>
        <li class="active" ng-hide="signedIn()"><a href="#register">Register <span class="sr-only">(current)</span></a></li>
        <li ng-hide="signedIn()"><a href="#/login">Login</a></li>
        <li ng-show="signedIn()"><a href="#/home">{{user.email}}</a></li>
        <li ng-show="signedIn()"><a ng-click="logout()">Logout</a></li>
      </ul>
    </div>
  </div>
</nav>


<ui-view></ui-view>


</body>
</html>

welcome.html

<div class="intro-header fadein">
    <div class="container">
        <div class="row">
            <div class="col-lg-12">
                <div class="intro-message" style="color: black">
                    <h1>The Notes App</h1>
                    <h3>Access your notes anywhere, anytime!</h3>

                    <hr class="intro-divider">
                    <ul class="list-inline intro-social-buttons">
                        <li>
                            <a href="#/login" class="btn btn-default btn-lg"><i class="fa fa-twitter fa-fw"></i> <span class="network-name">Login</span></a>
                        </li>
                        <li>
                            <a href="#/register" class="btn btn-default btn-lg"><i class="fa fa-github fa-fw"></i> <span class="network-name">register</span></a>
                        </li>
                    </ul>
                </div>
            </div>
            <div class="col-lg-12" >
            </div>
        </div>
    </div>
    <!-- /.container -->
</div>

Answer 1

在navCtrl.js中你有：

Auth.currentUser().then(function(user) {
  $scope.user = user;
});

这是其中一次登录尝试的原因。

我不知道其他尝试来自哪里。我建议您通过在Rails根文件夹中运行grep -r Auth\.currentUser app来检查类似的呼叫。

Answer 2

如果我猜对了，signIn（）函数会激活“sign_in.json”调用。

如果是，那么这是由于你在application.html.erb中有ng-show =“signedIn（）”/ ng-hide =“signedIn（）”。

Ng-show＆amp;解析页面时将评估ng-hide。

Angular-devise 401登陆页面上的未授权错误

2 个答案: