Spring Security + Angular



  • It is not quite clear how to process the username and password. The username and password are in the database. Tell me what direction to move.

    login.html

    <div class="container">
        <p><br/></p>
    
    &lt;div class="row"&gt;
        &lt;div class="col-md-4 col-md-offset-4"&gt;
            &lt;div class="panel panel-default"&gt;
                &lt;div class="panel-body" style="background-color: transparent"&gt;
                    &lt;div class="page-header"&gt;
                        &lt;h1&gt;Log in&lt;/h1&gt;
                    &lt;/div&gt;
                    &lt;!-- Start Form--&gt;
                    &lt;form method="post" name="loginForm"&gt;
                        &lt;!-- Start gorm-group username--&gt;
                        &lt;div class="form-group"&gt;
                            &lt;label for="exampleInputEmail1"&gt;Username or email&lt;/label&gt;
                            &lt;div class="input-group"&gt;
                                &lt;span class="input-group-addon" id="icon1"&gt;&lt;span class="glyphicon glyphicon-user"&gt;&lt;/span&gt;&lt;/span&gt;
                                &lt;input type="text" class="form-control" name="userLogin" id="exampleInputEmail1" ng-model="username"&gt;
                            &lt;/div&gt;
                            &lt;label id="userLoginLabel" for="exampleInputEmail1"&gt;&lt;/label&gt;
                        &lt;/div&gt;
                        &lt;!-- Start gorm-group password--&gt;
                        &lt;div class="form-group"&gt;
                            &lt;label for="exampleInputPassword1"&gt;Password&lt;/label&gt;
    
                            &lt;div class="input-group"&gt;
                                    &lt;span class="input-group-addon" id="icon2"&gt;&lt;span
                                            class="glyphicon glyphicon-lock"&gt;&lt;/span&gt;&lt;/span&gt;
                                &lt;input type="password" class="form-control" name="userPassword" id="exampleInputPassword1" ng-model="password"&gt;
                            &lt;/div&gt;
                            &lt;label id="passwordLabel" for="exampleInputPassword1" style="color:red"&gt;&lt;/label&gt;
                        &lt;/div&gt;
    
                        &lt;div class="checkbox"&gt;
                            &lt;label&gt;
                                &lt;input type="checkbox" name="rememberMe"&gt;Remember me
                            &lt;/label&gt;
                        &lt;/div&gt;
                        &lt;hr/&gt;
                        &lt;button type="submit" value="Submit" name="loginSubmit" class="btn btn-success" ng-click="login()"&gt;Log in&lt;/button&gt;
                        &lt;a href="#"&gt;
                            &lt;button type="button" name="signUpSubmit" class="btn btn-primary"&gt;Register
                            &lt;/button&gt;
                        &lt;/a&gt;
                        &lt;a href="#"&gt;Forgot your password?&lt;/a&gt;
                    &lt;/form&gt;
                    &lt;script type="text/javascript"&gt;
                    &lt;/script&gt;
                    &lt;!-- End Form--&gt;
                &lt;/div&gt;
            &lt;/div&gt;
        &lt;/div&gt;
    &lt;/div&gt;
    

    </div>

    LoginController.js

    'use strict';

    angular.module('Login').controller('LoginController', function ($scope, $state, $cookies, AuthenticationService) {
    $scope.login = function() {
    AuthenticationService.signIn($scope.username, $scope.password,
    function onSuccess(payload) {
    $state.go("dashboard");
    },
    function onError() {
    $state.go("login");
    }
    );
    }
    });

    AuthenticationService.js

    'use strict';

    app.factory('AuthenticationService', function (Network, $cookies) {
    return {

        signIn: function (username, password, onSuccess, onError) {
            Network.sendPost("/services/authentication/signIn",
                    {"login": username, "password": password},
                    onSuccess, onError);
        },
    
        signOut: function(onSuccess) {
            Network.sendGet("/services/authentication/signOut", {}, onSuccess);
        }
    };
    

    });



  • I did so by opening the page of the server &apos; s request, the server checks the session, and the user finds the data back if the standards are authorised by the user, it's all in the menu directive and the authorization service, so if the page is updated, the request will be sent and the response received.

     $rootScope.$on('$routeChangeStart', function (event) {
                        url = $location.url();
    

    This thing checks the user's rights and throws it off before the pages are downloaded.




Suggested Topics

  • 2
  • 2
  • 2
  • 2
  • 2
  • 2
  • 2
  • 2
  • 2
  • 2
  • 2
  • 2
  • 2
  • 2
  • 2