javascript - 在不重新加载页面的情况下处理成功的 node/angularjs 登录
问题描述
我正在尝试构建一个单页面节点/角度( v 1.56 )应用程序,该应用程序利用 angular 的 ui-router 来更改应用程序内的页面,而无需重新加载任何浏览器。我的主要障碍是我试图弄清楚在成功登录事件之后如何让用户进入仪表板页面而无需重定向/重新加载该页面?理想情况下,我正在寻找一种以编程方式触发路线的方法,就像我点击了链接一样。
在 loginAction 发布响应之后,我尝试使用 angular 的 $http.get('/dashboard') 到目标路由,但这不起作用,因为 $http.get() 与实际单击产生的 GET 调用完全不同在 href="/dashboard" 锚标签上。后一个单击事件按应有的方式调用仪表板页面,将其呈现在索引页面上的标记中。有没有一种“优雅”的角度来处理这个问题?使用节点的快速网络服务器或利用文件流的自定义网络服务器,这个问题是相同的。
<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 );
}
});
}
});
推荐阅读
- hadoop - 启动hadoop集群时的密码
- vb.net - 如何在具有定义的高度和宽度的绝对位置更改自动完成列表的位置?
- markdown - 美人鱼的空间
- excel - 隐藏单元格包含
- node.js - browserslist 查询如何组合在多行 browserslist 配置中?
- python - Python Fabric:发送 SIGINT (CTRL+C)
- html - 我可以单独使用 CSS 使我的标题字体大小取决于对象的宽度吗?
- sql - 我想遍历数据集并在所需位置插入数据,然后从临时表中选择所有行
- datepicker - gijgo datepicker - 仅限月份和年份
- azure - 如何在 Azure 数据工厂中的管道内获取多个管道成功而不是 1 个活动的警报