我正在使用角度js和节点js组合构建SPA。 我在一个HTML中编写了两个div ，并选择在条件满足时显示哪个div 。 我使用ng-if来检查条件。 但我的问题是每次刷新时ng-if中使用的模型的价值。 我怎样才能使它恒定？
在SPA中维持会话的主要做法是什么？
我已经实现了控制器功能来验证用户是否经过身份验证。
我已经使用此函数从快速节点服务器获取用户的状态。
我尝试了两种方式
var checkLoggedin = function ($q, $timeout, $http, $location, $rootScope) { var deferred = $q.defer(); $http.get('/loggedin').success(function (user) { if (user !== '0') /*$timeout(deferred.resolve, 0);*/ deferred.resolve(); // Not Authenticated else { $rootScope.message = 'You need to log in.'; //$timeout(function(){deferred.reject();}, 0); deferred.reject(); $location.url('/login'); } }); return deferred.promise; };Index.html页面
<div ng-controller="MainController" ng-init="init()"> <div ng-if="!checkLoggedin"> <!-- Should include MAININDEX.HTML here.........---> <div ng-include="'templates/mainindex.html'"></div> </div> <div ng-if="checkLoggedin"> <!-- Should include MAINLOGGEDIN.HTML here.........---> <div ng-include="'templates/mainloggedin.html'"></div> </div></div>我在mainindex.html中有一个登录页面，所以当我登录时，它会点击服务器并从护照创建req.user，并自动更改模态值并自动更改案例。 但是当我点击刷新按钮时它现在正在工作，第一个div再次显示。 我不知道为什么会这样。
方式2：我创建了一个cookie变量，其值为isLoggedIn，以填充为true或false，以便在ng-if语句中相应地工作。
但是我在这种情况下遇到错误。 我确定为什么会收到此错误。
jquery.min.js:1 Uncaught Error: TypeError: Failed to execute 'getComputedStyle' on 'Window': parameter 1 is not of type 'Element'. UserServices.login($scope.user, function (data) { console.log("In controller:"); console.log(data); $rootScope.isLoggedIn = "true"; $cookieStore.put("ISLOGGEDIN", true); $scope.username = data.username; });这是我的控制器功能，当点击第一个div上的按钮时执行。
我创建了一个app.run函数
App.run(function ($rootScope, $http, $cookies) { // Logout function is available in any pages $rootScope.logout = function ($cookieStore) { console.log("init test"); $cookieStore.put("ISLOGGEDIN", false); $http.post('/logout'); }; });在我的maincontroller中，几乎所有页面都加载了语句
var isLoggedIn= $cookieStore.get("ISLOGGEDIN")我希望这设置了isloggedin模型
我很困惑，两者的工作方式与它在第一次尝试中正常工作的方式相同，当刷新它不起作用但会话被维护时， user对象被记录在控制台中。 当页面刷新时，角度发生的机制是什么？
I am building a SPA in angular js and node js combo. I have written two divs in a single HTML and choose which one to show when the conditions are satisfying. I use ng-if for checking condition. But my problem is the value of the model used in ng-if changes in each refresh. How can I make it constant?
What is the main practice to maintain sessions in SPA?
I have implemented controller function to verify whether the user is authenticated or not.
I have used this function to fetch the status of the user from express-node server.
I tried two ways WAY 1
var checkLoggedin = function ($q, $timeout, $http, $location, $rootScope) { var deferred = $q.defer(); $http.get('/loggedin').success(function (user) { if (user !== '0') /*$timeout(deferred.resolve, 0);*/ deferred.resolve(); // Not Authenticated else { $rootScope.message = 'You need to log in.'; //$timeout(function(){deferred.reject();}, 0); deferred.reject(); $location.url('/login'); } }); return deferred.promise; };Index.html page
<div ng-controller="MainController" ng-init="init()"> <div ng-if="!checkLoggedin"> <!-- Should include MAININDEX.HTML here.........---> <div ng-include="'templates/mainindex.html'"></div> </div> <div ng-if="checkLoggedin"> <!-- Should include MAINLOGGEDIN.HTML here.........---> <div ng-include="'templates/mainloggedin.html'"></div> </div></div>I have a login page in the mainindex.html so I when I logged in it hits the server and creates the req.user from passport and automatically the modal value is changed and cases changed automatically. But it is now working when I click refresh button the first div is shown again. I don't know why it is happening so.
Way 2: I created a cookie variable with a value isLoggedIn to be populated with true or false So that in ng-if statement works accordingly.
But I get an error in this scenario. I am sure of why I get this error.
jquery.min.js:1 Uncaught Error: TypeError: Failed to execute 'getComputedStyle' on 'Window': parameter 1 is not of type 'Element'. UserServices.login($scope.user, function (data) { console.log("In controller:"); console.log(data); $rootScope.isLoggedIn = "true"; $cookieStore.put("ISLOGGEDIN", true); $scope.username = data.username; });This is my controller function and it is executed when the button on the first div clicked.
I have created an app.run function
App.run(function ($rootScope, $http, $cookies) { // Logout function is available in any pages $rootScope.logout = function ($cookieStore) { console.log("init test"); $cookieStore.put("ISLOGGEDIN", false); $http.post('/logout'); }; });In my maincontroller which loads in almost all pages has statement
var isLoggedIn= $cookieStore.get("ISLOGGEDIN")I hope this sets the isloggedin model
I am confused and both works in the same way it works rightly in the first attempt and when refreshed it's not working but the session is maintained the user object is logged in the console. What is the mechanism happening in angular when the page gets refreshed.
最满意答案
您可以使用sessionstorage或localstorage来实现此目的。
更新您的代码如下
登录功能：
UserServices.login($scope.user, function (data) { console.log("In controller:"); console.log(data); $rootScope.isLoggedIn = "true"; localStorage.ISLOGGEDIN = true; $scope.username = data.username; });应用运行方法
App.run(function ($rootScope, $http, $cookies) { // Logout function is available in any pages $rootScope.logout = function ($cookieStore) { console.log("init test"); localStorage.ISLOGGEDIN = false; $http.post('/logout'); }; });控制器：
var isLoggedIn= localStorage.ISLOGGEDIN;我使用localStorage，但你也可以使用sessionStorage，对于删除变量你可以使用localStorage的removeItem方法。
You can use sessionstorage or localstorage for this purpose.
update your code as follow
login function :
UserServices.login($scope.user, function (data) { console.log("In controller:"); console.log(data); $rootScope.isLoggedIn = "true"; localStorage.ISLOGGEDIN = true; $scope.username = data.username; });App run method
App.run(function ($rootScope, $http, $cookies) { // Logout function is available in any pages $rootScope.logout = function ($cookieStore) { console.log("init test"); localStorage.ISLOGGEDIN = false; $http.post('/logout'); }; });controller :
var isLoggedIn= localStorage.ISLOGGEDIN;i used localStorage , but you can also use sessionStorage , for delete variables you can use removeItem method of localStorage.
更多推荐
发布评论