angularjs的config和interceptor - session注入

最新推荐文章于 2024-04-06 13:00:00 发布

weixin_34007020

最新推荐文章于 2024-04-06 13:00:00 发布

阅读量152

点赞数

文章标签： javascript ViewUI

本文介绍如何在AngularJS中通过自定义HTTP拦截器实现会话管理。文章详细解释了如何利用HttpInterceptor在请求头中设置session token，并展示了如何根据不同状态码进行错误处理，确保应用程序的安全性和用户体验。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

config

这个要从config的正确使用说起，也许你想在config某个provider的时候注入$rootscope, 但是这是不允许的，我们细看下面的特性

session注入

每个请求自带sessionid,要实现这种功能就要用到interceptor，而不是用config配置ng-resource往里面添加参数 - config是在服务加载前提供配置参数个性化服务实例

    
    angular.module("secu.services")

    .factory('HttpInterceptor', ['$q', '$state',
        function($q, $state) {
            return {
                request: function(config) {
                    // config.headers['x-session-token'] = localStorage.getItem('sessionid');
                    if (localStorage.getItem('sessionid')) {
                        //1. post data
                        // config.data=config.data||{};
                        // config.data['session_id'] = localStorage.getItem('sessionid');
                        
                        //2. get parameters
                        config.params=config.params||{};
                        config.params['session_id'] = localStorage.getItem('sessionid');
                    }
                    // console.log('config: ',config);
                    return config;
                },
                requestError: function(err) {
                    return $q.reject(err);
                },
                response: function(res) {
                    if (res.data && res.data.code) {
                        switch (res.data.code) {
                            case '000':
                                return res
                            case '100':
                                alert(res.data.msg)
                                return res
                            case '200':
                                console.log(res.data.msg)
                                $state.go('login')
                                break
                        }
                    }

                    return res
                },
                responseError: function(err) {
                    if (-1 === err.status) {
                        // 远程服务器无响应
                    } else if (500 === err.status) {
                        // 处理各类自定义错误
                    } else if (501 === err.status) {
                        // ...
                    }
                    return $q.reject(err);
                }
            };
        }
    ])

    .config(['$httpProvider',
        function($httpProvider) {
            $httpProvider.interceptors.push('HttpInterceptor');
        }
    ])