suchen

Heim  >  Fragen und Antworten  >  Hauptteil

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

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

app.js里的代码如下

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

25

26

27

28

29

30

31

32

33

34

35

36

37

38

39

40

41

42

43

44

45

46

47

48

49

50

51

52

53

54

55

56

57

<code>'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;//如果是进入登录页面则允许

   //如果用户不存在

   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);

       }

   }

}]);

</code>

login.controller.js文件里的代码如下

1

2

3

4

5

6

7

8

9

10

11

12

13

14

<code>'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);

}]);</code>

login.js里的代码如下

1

2

3

4

5

6

7

8

9

10

11

12

13

<code>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'});

});</code>

shopcart.js里的代码如下

1

2

3

4

5

6

7

8

9

10

11

<code>'use strict';

 

angular.module('myApp',[])

.config(function($stateProvider) {

    $stateProvider

    .state('/',{

       url:'/home',

       templateUrl:'views/account/shopcart/shopcart.html' //登录成功后跳转到购物车页面

    })

    .oherwise({redirecTo:'/login'});

})</code>

天蓬老师天蓬老师2852 Tage vor1807

Antworte allen(2)Ich werde antworten

  • 世界只因有你

    世界只因有你2017-05-15 16:58:57

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

    Antwort
    0
  • 高洛峰

    高洛峰2017-05-15 16:58:57

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

    Antwort
    0
  • StornierenAntwort