成功登录后如何显示菜单项?

时间:2017-03-14 14:47:25

标签: angularjs

我已经创建了登录表单。我想在成功登录后在导航栏上显示配置文件菜单项。我在控制器内使用http服务将数据发布到数据库,以验证用于登录的电子邮件和密码组合。未使用的服务或工厂。 我使用ui_router进行导航。

我的导航栏页面是

<!-- Navigation -->
<nav class="navbar navbar-inverse" role="navigation">
  <div class="container">
    <!-- Brand and toggle get grouped for better mobile display -->
    <div class="navbar-header">
      <button type="button" class="navbar-toggle" 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" ui-sref="home"> <img src="images/logo.png" /></a>
    </div>
    <!-- Collect the nav links, forms, and other content for toggling -->
    <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
      <ul class="nav navbar-nav navbar-right">
        <li ui-sref-active="active"><a ui-sref="home">HOME</a></li>
        <li ui-sref-active="active"><a ui-sref="register">REGISTER</a></li>
        <li ui-sref-active="active"><a ui-sref="login">SIGN IN</a></li>
        <li ui-sref-active="active"><a ui-sref="contact">CONTACT</a></li>
      </ul>
    </div>
    <!-- /.navbar-collapse -->
  </div>
  <!-- /.container -->
</nav>

我的登录页面是

<div class="col-lg-6 col-lg-offset-3 well " style="margin-top:1em; background-color:black; ">

  <h4 style="color:white; text-align:center;"> <strong> LOGIN  </strong> </h4>

</div>


<div class="col-lg-6 col-lg-offset-3 well" style="margin-bottom:13em;">

  <form name="login" ng-app="TempleWebApp" ng-controller="logCtrl" ng-submit="signin(login.$valid)" novalidate>

    <div class="form-group col-lg-12" ng-class="{ 'has-error' : login.email.$invalid && (login.email.$dirty || submitted)}">
      <label>Email</label>
      <input class="form-control" type="text" name="email" ng-model="useremail" placeholder="Email" ng-pattern="/^[^\s@]+@[^\s@]+\.[^\s@]{2,}$/" ng-required="true">
      <span class="help-block" ng-show="login.email.$invalid && login.email.$error.required && (login.email.$dirty || submitted)">
				          Email is required.</span>
      <span class="help-block" ng-show="login.email.$error.pattern">
				        Enter Valid  Email .</span>
    </div>


    <div class="form-group col-lg-12" ng-class="{ 'has-error' : login.password.$invalid && (login.password.$dirty || submitted)}">
      <label>Password</label>
      <input class="form-control" type="password" name="password" ng-model="userpassword" placeholder="Password" ng-required="true">
      <span class="help-block" ng-show="login.password.$invalid && login.password.$error.required && (login.password.$dirty || submitted)">
				          Password is required.</span>
    </div>

    <div class="col-lg-12 well " ng-repeat="error in errors" style="background-color:red; margin-top:0.5em;"> {{ error}} </div>
    <div class="col-lg-12 well" ng-repeat="msg in msgs" style="margin-top:0.5em;">
      <h5 style="color:green;">{{ msg}} </h5>
    </div>


    <button type="submit" class="btn btn-success col-lg-12"> 
				   <span ng-show="searchButtonText == 'REDIRECTING TO PROFILE PAGE'"><i class="glyphicon glyphicon-refresh spinning"></i></span>
                  {{ searchButtonText }}
				</button>


  </form>
</div>

我的js文件是

/**
 * Main AngularJS Web Application
 */
var app = angular.module('TempleWebApp', ['ui.router', 'angular-flexslider']);

/**
 * Configure the Routes
 */

app.config(function($stateProvider, $urlRouterProvider) {

  $urlRouterProvider.otherwise('/home');

  $stateProvider

    .state('home', {
      url: '/home',
      templateUrl: 'html/home.html',
      controller: 'PageCtrl'
    })

    .state('contact', {
      url: '/contact',
      templateUrl: 'html/contact.html',
      controller: 'PageCtrl'
    })

    .state('register', {
      url: '/register',
      templateUrl: 'html/register.html',
      controller: 'RegisterCtrl'
    })

    .state('login', {
      url: '/login',
      templateUrl: 'html/signin.html',
      controller: 'logCtrl'
    })

    .state('profile', {
      url: '/profile',
      templateUrl: 'html/profile.html',
      controller: 'logCtrl'
    });

})


// create angular controller for Signin
app.controller('logCtrl', function($scope, $location, $http, $timeout) {

  $scope.errors = [];
  $scope.msgs = [];
  $scope.searchButtonText = "LOGIN";
  $scope.test = "false";

  $scope.signin = function(isValid) {

    // Set the 'submitted' flag to true
    $scope.submitted = true;
    $scope.errors.splice(0, $scope.errors.length); // remove all error messages
    $scope.msgs.splice(0, $scope.msgs.length);



    if (isValid) {

      $http.post('php/login.php', {
          'email': $scope.useremail,
          'pswd': $scope.userpassword

        })
        .success(function(data, status, headers, config) {
          if (data.msg != '') {
            $scope.msgs.push(data.msg);

            $scope.test = "true";
            $scope.searchButtonText = "REDIRECTING TO PROFILE PAGE";
            var goTopayment = function() {
              $scope.searchButtonText = "LOGIN";
              $location.path('/profile');
            };
            $timeout(goTopayment, 3000);

          } else {
            $scope.errors.push(data.error);
          }
        })
        .error(function(data, status) { // called asynchronously if an error occurs or server returns response with an error status.

          $scope.errors.push(status);
        });
    } // closing bracket for IF(isvalid)

  } // closing bracket for $scope.SIGNUP = function 	 




});

2 个答案:

答案 0 :(得分:0)

登录成功后,您可以将令牌设置为cookie,并在主页中检查cookie中是否存在令牌并显示导航项。

答案 1 :(得分:0)

    public interface APIService {
      @GET("{path}/following/{target}")
      Call<Users> getFollowers(@Path("path") String path,@Path("{target}") String target) );
    }
相关问题