1
私はangularjsを初めて使用しており、ログインページを作成しました。anglejsのページを更新した後、現在のページに留まる方法
私がログインすると、私のホームページにリダイレクトされます。リフレッシュボタンをクリックすると、現在のページにはログインしていない状態になります。
誰でも助けてください。
ありがとうございます。
以下、私が書いた私のコードです
login.view.html
<div class="page-wrapper">
<div class="main-wrapper bgm">
<div class="main">
<div class= "document-title"></div>
<div class="container">
<div class=" row">
<div class="col-md-4 col-md-offset-8">
<div class="panel panel-default">
<div class="panel-heading"><div class="logo text-center"><strong>Login</strong></div></div>
<div class="panel-body">
<div role="tabpanel" class="tab-pane active" id="personal">
<div class="row">
<div class="col-sm-12">
<form name="form" ng-submit="vm.login()" role="form">
<div class="form-group" ng-class="{ 'has-error': form.username.$dirty && form.username.$error.required }">
<label for="username">Email/UserName</label>
<input type="text" placeholder="Email/UserName" name="username" id="username" class="form-control" ng-model="vm.username" required />
<span ng-show="form.username.$dirty && form.username.$error.required" class="help-block">Email or username required</span>
</div>
<div class="form-group" ng-class="{ 'has-error': form.password.$dirty && form.password.$error.required }">
<label for="password">Password</label>
<input type="password" name="password" id="password" class="form-control" placeholder="password" ng-model="vm.password" required />
<span ng-show="form.password.$dirty && form.password.$error.required" class="help-block">Password required</span>
</div>
<div class="form-group">
<div class="col-sm-offset-3 col-sm-9">
<div class="checkbox"><label class=""><input type="checkbox" class="">Remember me</label></div>
</div>
</div>
<div class="form-actions">
<div class="col-sm-offset-3 col-sm-9">
<button type="submit" ng-disabled="form.$invalid || vm.dataLoading" class="btn btn-success btn-sm">Sign in</button>
<button type="reset" class="btn btn-default btn-sm">Reset</button>
<img ng-if="vm.dataLoading" src="data:image/gif;base64,R0lGODlhEAAQAPIAAP///wAAAMLCwkJCQgAAAGJiYoKCgpKSkiH/C05FVFNDQVBFMi4wAwEAAAAh/hpDcmVhdGVkIHdpdGggYWpheGxvYWQuaW5mbwAh+QQJCgAAACwAAAAAEAAQAAADMwi63P4wyklrE2MIOggZnAdOmGYJRbExwroUmcG2LmDEwnHQLVsYOd2mBzkYDAdKa+dIAAAh+QQJCgAAACwAAAAAEAAQAAADNAi63P5OjCEgG4QMu7DmikRxQlFUYDEZIGBMRVsaqHwctXXf7WEYB4Ag1xjihkMZsiUkKhIAIfkECQoAAAAsAAAAABAAEAAAAzYIujIjK8pByJDMlFYvBoVjHA70GU7xSUJhmKtwHPAKzLO9HMaoKwJZ7Rf8AYPDDzKpZBqfvwQAIfkECQoAAAAsAAAAABAAEAAAAzMIumIlK8oyhpHsnFZfhYumCYUhDAQxRIdhHBGqRoKw0R8DYlJd8z0fMDgsGo/IpHI5TAAAIfkECQoAAAAsAAAAABAAEAAAAzIIunInK0rnZBTwGPNMgQwmdsNgXGJUlIWEuR5oWUIpz8pAEAMe6TwfwyYsGo/IpFKSAAAh+QQJCgAAACwAAAAAEAAQAAADMwi6IMKQORfjdOe82p4wGccc4CEuQradylesojEMBgsUc2G7sDX3lQGBMLAJibufbSlKAAAh+QQJCgAAACwAAAAAEAAQAAADMgi63P7wCRHZnFVdmgHu2nFwlWCI3WGc3TSWhUFGxTAUkGCbtgENBMJAEJsxgMLWzpEAACH5BAkKAAAALAAAAAAQABAAAAMyCLrc/jDKSatlQtScKdceCAjDII7HcQ4EMTCpyrCuUBjCYRgHVtqlAiB1YhiCnlsRkAAAOwAAAAAAAAAAAA==" />
</div>
</div>
</form>
</div>
</div><!-- /.row -->
</div><!-- /.tab-pane -->
</div><!-- panel body -->
<div class="panel-footer">
<div class="row">
<a href="#/resetpassword" class="btn btn-link">Forgot Password?</a>
</div><!-- row -->
</div><!-- panel footer -->
</div><!-- /.tab-panel default -->
</div> <!--col-md-4-->
</div><!-- /.row -->
</div><!-- /.container -->
</div><!-- /.main -->
</div><!-- /.main-wrapper -->
</div><!-- /.page-wrapper -->
home.view.html
<!DOCTYPE html>
<html lang="en" ng-app="app">
<head>
<title>Groupz</title>
</head>
<style>
/* Remove the navbar's default margin-bottom and rounded borders */
.navbar {
margin-bottom: 0;
border-radius: 0;
border-color: white;
height: 6em;
padding-top: 12px;
background-color: #2eb2f2;
}
/* Set height of the grid so .sidenav can be 100% (adjust as needed) */
.row.content {
height: 1000px
}
/* Set gray background color and 100% height */
.sidenav {
padding-top: 20px;
background-color: #f1f1f1;
height: 100%;
}
/* Set black background color, white text and some padding */
footer {
background-color: #555;
color: white;
padding: 15px;
}
/* On small screens, set height to 'auto' for sidenav and grid */
@media screen and (max-width: 767px) {
.sidenav {
height: auto;
padding: 15px;
}
.row.content {
height: auto;
}
}
canvas {
padding: 0 30px 0 0;
}
</style>
<body>
<nav class="navbar navbar-inverse">
<div class="container-fluid">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#myNavbar">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<img class="img-responsive" src="css/images/Groupz.png" />
</div>
<div class="collapse navbar-collapse" id="myNavbar">
<div class="nav navbar-nav navbar-right" style="padding-top:6px;">
<div class="dropdown">
<span class="badge">5</span><img style="padding-right:10px;" src="css/images/bell1.png" />
<img class="img-circle dropdown-toggle" data-toggle="dropdown" width="40" height="40" src="css/images/image.jpg" /><span class="caret dropdown-toggle" data-toggle="dropdown"></span>
<ul class="dropdown-menu">
<li><a href="#/login">Logout</a></li>
</ul>
</div>
</div>
</div>
</div>
</nav>
<div class="container-fluid text-center" ng-controller="UserDataController as ctrl">
<div class="row content" style="margin-top:100px; color:rgba(51, 122, 183, 1);" ng-if="!model.displayHome">
<button ng-click="getData('json.json','','','GET')">Click to login</button>
</div>
<div class="row content" ng-if="model.displayHome">
<div class="col-sm-2 sidenav">
<div class="well well-lg col-xs-30" style="background-color: green;" ng-show="true">
<img class="img-responsive" style="padding-bottom:10px;" src="css/images/image.jpg" />
<div class="form-group">
<select class="form-control" ng-model="model.selectedValue" name="groupzname">
<option value='' disabled> Switch Account </option>
<option ng-repeat="item in model.dropDownData track by $index" value="{{item}}">{{item}}</option>
</select>
</div>
</div>
<div class="collapse navbar-collapse navbar-ex1-collapse">
<ul class="nav navbar-nav">
<li><a href="#/dashboard"><span class="glyphicon glyphicon-dashboard vmenu"></span> Dashboard</a>
</li>
<li class="#/Profile"><a href="#/"><span class="glyphicon glyphicon-user vmenu"></span>Profile</a>
</li>
<li><a href="#/Account"><span class="glyphicon glyphicon-edit vmenu"></span>Account</a>
</li>
<li><a href="#/Dropbox"><span class="glyphicon glyphicon-tags vmenu"></span>Dropbox</a>
</li>
<li><a href="#/Checklist"><span class="glyphicon glyphicon-off vmenu"></span>Checklist</a>
</li>
<li><a href="#/Report"><span class="glyphicon glyphicon-off vmenu"></span>Report</a>
</li>
<li><a href="#/Settings"><span class="glyphicon glyphicon-off vmenu"></span>Settings</a>
</li>
<li><a href="#/Help"><span class="glyphicon glyphicon-off vmenu"></span>Help</a>
</li>
</ul>
</div>
</div>
<div class="col-sm-8 text-left" ng-show="true">
<h1>Welcome</h1>
<div class="form-group">
<label class="form-control" ng-model="model.membervalue" name="membername" style="border:none"> {{model.membervalue}}</label>
</div>
</div>
</div>
</div>
<footer class="container-fluid text-center">
<p>Groupz</p>
</footer>
</body>
</html>
userdata.controller.js
(function() {
'use strict';
var app = angular.module('app');
app.controller('UserDataController', function($scope,$window,$http,$q) {
$scope.model = {
'displayHome' : false,
'dropDownData':[]
};
$scope.cookietechnology = $window.localStorage.x; //getting data from cookies
if($scope.cookietechnology){
$scope.model.dropDownData = $scope.cookietechnology;
$scope.model.selectedValue = $scope.cookietechnology;
$scope.model.displayHome = true;
}
$scope.getData = function(requestedUrl,requestHeader, requestData,requestMethod) {
$scope.model.dropDownData = [];
var deferred = $q.defer();
var req = {
method: requestMethod,
url: requestedUrl,
headers:{"Content-Type": "application/x-www-form-urlencoded"},
data: requestData
};
$http(req)
.success(function(response) {
var user = response.json.response.user;
console.log(user);
for(var i=0; i<user.length-1; i++)
{
console.log("datas : "+response.json.response.user[i].groupzname);
$scope.model.dropDownData.push(response.json.response.user[i].groupzname + " - "+response.json.response.user[i].membername); // we can itterate and set the drop down values
console.log($scope.model.dropDownData);
$scope.model.selectedValue = response.json.response.user[i].groupzname + " - " + response.json.response.user[i].membername; // set model value
$scope.model.membervalue = response.json.response.user[i].membername;
}
$window.localStorage.x = $scope.model.dropDownData; //setting data in cookies
$scope.model.displayHome = true; // variable to show and hide home and login
deferred.resolve(response);
})
.error(function(error) {
deferred.reject(error);
});
return deferred.promise;
};
});
})();
app.js
(function() {
'use strict';
angular
.module('app', ['ngRoute', 'ngCookies'])
.config(config)
.run(run);
config.$inject = ['$routeProvider', '$locationProvider'];
function config($routeProvider, $locationProvider) {
$routeProvider
.when('/', {
controller: 'UserDataController',
templateUrl: 'view/home.view.html',
controllerAs: 'vm'
})
.when('/admin', {
controller: 'HomeController',
templateUrl: 'view/adminhome.view.html',
controllerAs: 'vm'
})
.when('/userdata', {
controller: 'UserDataController',
templateUrl: 'view/profile.view.html',
controllerAs: 'vm'
})
.when('/login', {
controller: 'LoginController',
templateUrl: 'view/login.view.html',
controllerAs: 'vm'
})
.when('/resetpassword', {
controller: 'ResetPasswordController',
templateUrl: 'view/resetpassword.view.html',
controllerAs: 'vm'
})
.when('/resetpasswordmailsent',{
templateUrl: 'view/resetpasswordmailsent.view.html'
})
.when('/setnewpassword/:id', {
controller: 'SetNewPasswordController',
templateUrl: 'view/setnewpassword.view.html',
controllerAs: 'vm'
})
.when('/register', {
controller: 'RegisterController',
templateUrl: 'view/register.view.html',
controllerAs: 'vm'
})
.when('/afterregister', {
templateUrl: 'view/activationlinksent.view.html'
})
.when('/VerifyEmail/:id', {
controller: 'VerifyEmailController',
templateUrl: 'view/accountactivation.view.html',
controllerAs: 'vm'
})
.otherwise({ redirectTo: '/login' });
}
run.$inject = ['$rootScope', '$location', '$cookieStore', '$http'];
function run($rootScope, $location, $cookieStore, $http) {
// keep user logged in after page refresh
$rootScope.globals = $cookieStore.get('globals') || {};
$rootScope.globals = $cookieStore.get('groupzname') || {};
if ($rootScope.globals.currentUser) {
$http.defaults.headers.common['Authorization'] = 'Basic ' + $rootScope.globals.currentUser.authdata; // jshint ignore:line
}
$rootScope.$on('$locationChangeStart', function (event, next, current) {
// redirect to login page if not logged in and trying to access a restricted page
var restrictedPage = $.inArray($location.path(), ['/login', '/resetpassword','/register','/resetpasswordmailsent','/afterregister','/setnewpassword']) === -1;
var loggedIn = $rootScope.globals.currentUser;
if (restrictedPage && !loggedIn) {
$location.path('/login');
}
});
}
})();
私を助けてください。
$ rootScope –
の代わりに$ localstorage.globals.currentUserを使う必要がありますか？アプリケーションが起動するときにlocalstorageに存在すれば、$ rootScope.globals.currentUserにロードする方が良いでしょう。次に、$ scope.globals.currentUserの下のすべてのコントローラでアクセスできます。 –