您的位置:首页技术文章
文章详情页

前端 - 怎么设置登录成功后跳转到相应的页面

【字号: 日期:2024-10-09 08:43:10浏览:38作者:猪猪

问题描述

想要用angularjs实现的功能是一进入就是一个登录页面(login.html),如果没有账号密码就注册,登录成功后跳转到相应的页面(shopcart.html)碰到的问题1.一进入页面没有显示登录页面2.显示成功后该如何跳转到相应的页面3.应该在何处判断用户是否登录,或者登录超时之类的下面是我的文档目录结构

前端 - 怎么设置登录成功后跳转到相应的页面

app.js里的代码如下

’use strict’;// Declare app level module which depends on filters, and servicesangular.module(’myApp’, []).run(function($rootScope) { $rootScope.$on(’$stateChangeStart’, function(event,toState,toParams,fromState,fromParams) { if(toState.name == ’login’) return;//如果是进入登录页面则允许 //如果用户不存在 if(!$rootScope.user || $rootScope.user.token) { event.preventDefault();//取消默认跳转行为 $state.go('login',{from:fromState.name,w:’notLogin’});//跳转到登录界面 } });}).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; //判断出错误码,如果是未登录 if(data['errorCode'] == '500999') { //清空本地token存储信息 $rootScope.user = {token: ''}; //全局事件,方便其他view获取该事件,并给以相应的提示或处理 $rootScope.$emit('userInterceptor','notLogin',response) } //如果是登录超时 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) { //跳转到登录界面,记录了一个from,这样可以在登陆后自动跳转到未登录之前的那个页面去 $state.go('login', {from:$state.current.name,w:errorType}); if($rootScope.user,token) { $state.go($rootScope.defaultPage); return; } //登录成功后跳转到上一次页面,也就是上面记录的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’ //登录成功后跳转到购物车页面 }) .oherwise({redirecTo:’/login’});})

问题解答

回答1:

我的习惯是将用户相关的公能单独封装到一个user service,app.js负责调用,一般来说,刚启动程序时需要检测用户是否登录(登录标记放在本地),这样app.js中使用,$state(UI-router模块)来切换路由,以跳转到特定页面

回答2:

这个是什么版本的?怎么我现在配路由都是用$routeProvider了

相关文章: