想要用angularjs實(shí)現(xiàn)的功能是
一進(jìn)入就是一個(gè)登入頁(yè)面(login.html),如果沒(méi)有帳號(hào)密碼就註冊(cè),登入成功後跳到對(duì)應(yīng)的頁(yè)面(shopcart.html)
碰到的問(wèn)題
1.一進(jìn)入頁(yè)面沒(méi)有顯示登錄頁(yè)面
2.顯示成功後該如何跳到相應(yīng)的頁(yè)面
3.應(yīng)該在何處判斷用戶是否登錄,或者登錄超時(shí)之類(lèi)的
下面是我的文檔目錄結(jié)構(gòu)
app.js裡的程式碼如下
'use strict';
// Declare app level module which depends on filters, and services
angular.module('myApp', [])
.run(function($rootScope) {
$rootScope.$on('$stateChangeStart', function(event,toState,toParams,fromState,fromParams) {
if(toState.name == 'login') return;//如果是進(jìn)入登錄頁(yè)面則允許
//如果用戶不存在
if(!$rootScope.user || $rootScope.user.token) {
event.preventDefault();//取消默認(rèn)跳轉(zhuǎn)行為
$state.go("login",{from:fromState.name,w:'notLogin'});//跳轉(zhuǎn)到登錄界面
}
});
})
.config(function($httpProvider,$rootProvider) {
$httpProvider.interceptors.push('userInterceptor');
$rootProvider
.when('/',{
templateUrl:'views/shopcart.html'
})
.when('/login', {
templateUrl: 'views/account/login/login.html'
})
.when('register', {
templateUrl: 'views/account/register/register.html'
})
.otherwise({
redirectTo:'/login'
});
})
.factory('userInterceptor',["$q","$rootScope",function($q,$rootScope) {
return {
request: function(config) {
config.headers["TOKEN"] = $rootScope.user.token;
return config;
},
responseError: function(response) {
var data = response.data;
//判斷出錯(cuò)誤碼,如果是未登錄
if(data["errorCode"] == "500999") {
//清空本地token存儲(chǔ)信息
$rootScope.user = {token: ""};
//全局事件,方便其他view獲取該事件,并給以相應(yīng)的提示或處理
$rootScope.$emit("userInterceptor","notLogin",response)
}
//如果是登錄超時(shí)
if(data["errorCode"] == "500998") {
$rootScope.$emit("userInterceptor","sessionOut",response);
}
return $q.reject(response);
}
}
}]);
login.controller.js檔案裡的程式碼如下
'use strict';
angular.module('myApp',[])
.controller('LogoinCtrl',["$rootScope","$scope", function($rootScope,$scope) {
//跳轉(zhuǎn)到登錄界面,記錄了一個(gè)from,這樣可以在登陸后自動(dòng)跳轉(zhuǎn)到未登錄之前的那個(gè)頁(yè)面去
$state.go("login", {from:$state.current.name,w:errorType});
if($rootScope.user,token) {
$state.go($rootScope.defaultPage);
return;
}
//登錄成功后跳轉(zhuǎn)到上一次頁(yè)面,也就是上面記錄的from
var from = $stateParams["from"];
$state.go(from && from != "login" ? from : $rootScope.defaultPage);
}]);
login.js裡的程式碼如下
angular.module('myApp',[])
.config(function($stateProvider) {
$stateProvider
.state('login', {
url:"/login",
templateUrl:"views/account/login/login.html"
})
.state('register', {
url:'/register',
templateUrl:"views/account/register/register.html"
})
.otherwise({redirectTo: '/login'});
});
shopcart.js裡的程式碼如下
'use strict';
angular.module('myApp',[])
.config(function($stateProvider) {
$stateProvider
.state('/',{
url:'/home',
templateUrl:'views/account/shopcart/shopcart.html' //登錄成功后跳轉(zhuǎn)到購(gòu)物車(chē)頁(yè)面
})
.oherwise({redirecTo:'/login'});
})
歡迎選擇我的課程,讓我們一起見(jiàn)證您的進(jìn)步~~
我的習(xí)慣是將使用者相關(guān)的公能單獨(dú)封裝到一個(gè)user service,app.js負(fù)責(zé)調(diào)用,一般來(lái)說(shuō),剛啟動(dòng)程式時(shí)需要檢測(cè)使用者是否登入(登入標(biāo)記放在本地),這樣app.js中使用,$state(UI-router模組)來(lái)切換路由,以跳到特定頁(yè)面