[英]Handling successful node/angularjs login without reloading page
我正在嘗試構建一個單頁面節點/ angular(v 1.56)應用程序,該應用程序利用angular的ui-router更改應用程序內的頁面,而無需重新加載任何瀏覽器。 我的主要障礙是,我試圖弄清楚登錄事件成功之后如何在無需重定向/重新加載該頁面的情況下使用戶進入儀表板頁面? 理想情況下,我正在尋找一種方法來以編程方式觸發路線,就像單擊鏈接一樣。
我嘗試在loginAction發布響應后使用angular的$ http.get('/ dashboard')到目標路線,但這不起作用,因為$ http.get()與實際點擊產生的GET調用完全不同在href =“ / dashboard”定位標記上。 后一種click事件將按其應有的方式調用儀表板頁面,並將其呈現在索引頁面上的標記中。 有沒有一種“優美的”,有角度的方式來解決這個問題? 使用節點的快速Web服務器或利用文件流的自定義Web服務器時,此問題相同。
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.6/angular.min.js"></script>
<script>
var app = angular.module('myApp',['ui.router']);
app.config(function($stateProvider) {
var aboutState = {
name: 'about', //for testing
templateUrl: '/about'
};
var dashboardState = {
name: 'dashboard',
templateUrl: '/dashboard'
};
$stateProvider.state(aboutState);
$stateProvider.state(dashboardState);
});
app.controller("myCtrl", function($scope, $http) {
$scope.userMessage = "";
$scope.loginSubmit = function () {
$scope.userMessage = "Submitting...";
$http.post("/loginAction",{ 'username': $scope.username, 'password':$scope.password }).then(function(response) {
if( response.data.loginStatus == 'Authenticated' && response.data.userType != '' ) {
// OK ! - we're free to go to the dashboard page now. But how ?
// I could do: document.querySelector("#dash").click();
// this works, but this doesn't seem very secure
// The following doesn't work:
$http.get("/dashboard").then(function( response ) {
// Why doesn't the above '/dashboard' route , but
// clicking on something like <a href="/dashboard">Dashboard</a> actually works ?
// Short of taking the dashboard html in the response and using bind-html to force it
// into the dom, is there a better solution to avoid a window.location reload here ?
$scope.userMessage = "Login Successful";
});
}
});
}
});
我想我回答了我自己的問題。 我需要利用'ngRoute'服務並將$ location注入控制器,如下所示:
<script>
var app = angular.module('myApp',['ngRoute']);
app.config(function($ routeProvider){
$routeProvider
.when('/', {
templateUrl : 'login',
controller : 'myCtrl'
})
.when('/test', {
templateUrl : '/test',
controller : 'myCtrl'
})
.when('/dashboard', {
templateUrl :'/dashboard',
controller : 'myCtrl'
}).otherwise({redirectTo: '/'});
});
app.controller(“ myCtrl”,function($ scope,$ http,$ location){
$scope.userMessage = "";
// fire this function upon successful login:
$scope.changeRoute = function( route ) {
$location.path( route );
}
$scope.loginSubmit = function () {
$scope.userMessage = "Submitting...";
$http.post("/loginAction",{ 'username': $scope.username, 'password':$scope.password }).then(function(response) {
if( response.data.loginStatus == 'Authenticated' && response.data.userType != '' ) {
$scope.userMessage = "Authenticated...";
$scope.changeRoute( response.data.destination_route );
}
});
}
});
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.