AngularJS change URL in module.config [用AngularJS变化在module.config URL] - 问题-字节技术
AngularJS change URL in module.config
用AngularJS变化在module.config URL
问题 (Question)
I use Restangular in my angularjs App & use setErrorInterceptor to handle response error in one place. I want to redirect user to login page if an error occured. I know that the only providers & constants are injectable in configuration phase.
var app = angular.module('ourstandApp', ['ngRoute', 'restangular', 'ui.bootstrap', 'ngCookies', 'angularFileUpload']);
// Global configuration
app.config(function (RestangularProvider, baseRequestConfig, $routeProvider, urlsProvider) {
var getBaseRequestUrl = function () {
return baseRequestConfig.protocol + "://" + baseRequestConfig.hostName + ":" + baseRequestConfig.portNumber + baseRequestConfig.resourceP
var initializeRoute = function () {
$routeProvider.when('/', {
controller: LoginController,
templateUrl: 'views/login.html'
otherwise({
redirectTo: '/'
initializeRoute();
RestangularProvider.setBaseUrl(getBaseRequestUrl());
RestangularProvider.setErrorInterceptor(function (resp) {
goToLogin();
i want to change url to login page
我用Restangular我用AngularJS程序及使用setErrorInterceptor在一个地方处理响应误差。我想重定向用户登录页面，如果出现了一个错误。我知道只有providers与constants注射在配置阶段。var app = angular.module('ourstandApp', ['ngRoute', 'restangular', 'ui.bootstrap', 'ngCookies', 'angularFileUpload']);
// Global configuration
app.config(function (RestangularProvider, baseRequestConfig, $routeProvider, urlsProvider) {
var getBaseRequestUrl = function () {
return baseRequestConfig.protocol + "://" + baseRequestConfig.hostName + ":" + baseRequestConfig.portNumber + baseRequestConfig.resourceP
var initializeRoute = function () {
$routeProvider.when('/', {
controller: LoginController,
templateUrl: 'views/login.html'
otherwise({
redirectTo: '/'
initializeRoute();
RestangularProvider.setBaseUrl(getBaseRequestUrl());
RestangularProvider.setErrorInterceptor(function (resp) {
goToLogin();
i want to change url to login page
最佳答案 (Best Answer)
the correct way for handling this problem is configuring restangular in run method of angularjs
app.run(Restangular , $location){
Restangular.setErrorInterceptor(function (resp) {
$location.path('/login');
处理这个问题的正确方法是配置在矩形run方法用AngularJSapp.run(Restangular , $location){
Restangular.setErrorInterceptor(function (resp) {
$location.path('/login');
答案 (Answer) 2
The idea here is to be more specific about how resources are requested. In this excerpt from a project i am using the resolve option of routeProvider.when to look up a resource based on path input and injecting the result as ArticleRequest before resolving the route.
If the api calls the route fails and the $routeChangeError event is fired
App.config(['$routeProvider', '$locationProvider', 'TEMPLATE_PATH',
function ($routeProvider, $locationProvider, TEMPLATE_PATH) {
$routeProvider.
when('/', {
templateUrl: TEMPLATE_PATH + 'views/Home.html',
controller: 'HomeCtrl',
caseInsensitiveMatch: true
when('/:slug/:nocache?', {
templateUrl: TEMPLATE_PATH + 'views/Article.html',
controller: 'ArticleCtrl',
caseInsensitiveMatch: true,
resolve: {
ArticleRequest: ['$http', '$route', function ($http, $route) {
return $http.post('/api/article/GetArticleBySlug',
slug: $route.current.params.slug,
nocache: !!$route.current.params.nocache && $route.current.params.nocache == 'preview'
otherwise({
redirectTo: '/'
// configure html5 to get links working on jsfiddle
$locationProvider.html5Mode(true);
Here is a very simple implementation of the $routeChangeError handler
App.run(['$rootScope', '$location', function($rootScope, $location) {
$rootScope.$on('$routeChangeError', function (e, current, previous, rejection) {
console.log("ROUTE ERROR:", current, previous, rejection);
// you might redirect here based on some logic
$location.path('[YOUR PATH]');
and here is the controller
ViewControllers.controller('ArticleCtrl',
['$scope', '$http', '$routeParams', 'ArticleRequest',
function ($scope, $http, $routeParams, ArticleRequest) {
console.log(ArticleRequest);
Is something like this usefull in you case with Restangular?
这里的想法是关于资源如何被更具体的要求。从一个项目在这段我使用resolve选项的routeProvider.when要查找资源，基于路径输入和注射的结果ArticleRequest在解决路径。如果API调用路由失败，$routeChangeError事件触发App.config(['$routeProvider', '$locationProvider', 'TEMPLATE_PATH',
function ($routeProvider, $locationProvider, TEMPLATE_PATH) {
$routeProvider.
when('/', {
templateUrl: TEMPLATE_PATH + 'views/Home.html',
controller: 'HomeCtrl',
caseInsensitiveMatch: true
when('/:slug/:nocache?', {
templateUrl: TEMPLATE_PATH + 'views/Article.html',
controller: 'ArticleCtrl',
caseInsensitiveMatch: true,
resolve: {
ArticleRequest: ['$http', '$route', function ($http, $route) {
return $http.post('/api/article/GetArticleBySlug',
slug: $route.current.params.slug,
nocache: !!$route.current.params.nocache && $route.current.params.nocache == 'preview'
otherwise({
redirectTo: '/'
// configure html5 to get links working on jsfiddle
$locationProvider.html5Mode(true);
这里是一个非常简单的实现$routeChangeError处理程序App.run(['$rootScope', '$location', function($rootScope, $location) {
$rootScope.$on('$routeChangeError', function (e, current, previous, rejection) {
console.log("ROUTE ERROR:", current, previous, rejection);
// you might redirect here based on some logic
$location.path('[YOUR PATH]');
这里是控制器ViewControllers.controller('ArticleCtrl',
['$scope', '$http', '$routeParams', 'ArticleRequest',
function ($scope, $http, $routeParams, ArticleRequest) {
console.log(ArticleRequest);
这样的事情在你的情况下使用矩形？
答案 (Answer) 3
Inject $injector to the config block and invite $location when needed:
RestangularProvider.setErrorInterceptor(function (resp) {
var $location = $injector.get('$location');
$location.path('/login');
Also check my other answers:
注入$injector要配置块和邀请$location在需要的时候：RestangularProvider.setErrorInterceptor(function (resp) {
var $location = $injector.get('$location');
$location.path('/login');
还检查我的其他答案：
答案 (Answer) 4
If I understand you correctly you want to redirect the user to a login page based on a status code returned to you by the server? Like a 404 or 403?
If that's the case this is how I handle redirects on a 404 and 403 using setErrorInterceptor in one of my apps. This may not be the best way to do this, but It's been working just fine so far for me.
app.config(['RestangularProvider', function (RestangularProvider) {
RestangularProvider.setErrorInterceptor(function (response) {
// Redirect the user to the login page if they are not logged in.
if (response.status == '403' && response.data.detail == 'Authentication credentials were not provided.') {
var next = window.location.pathname + window.location.
window.location.href = '/accounts/login/?next=' +
// Redirect the user on a 404.
if (response.status == '404') {
// Redirect to a 404 page.
window.location.href = '/#/';
如果我理解正确的话你想将用户重定向到一个基于状态码登录页面，服务器返回的吗？像404或403？如果是这样的话，这是我如何处理在404和403使用重定向setErrorInterceptor在我的程序中的一个。这可能不是最好的办法，但是，它的工作就好了到目前为止我。app.config(['RestangularProvider', function (RestangularProvider) {
RestangularProvider.setErrorInterceptor(function (response) {
// Redirect the user to the login page if they are not logged in.
if (response.status == '403' && response.data.detail == 'Authentication credentials were not provided.') {
var next = window.location.pathname + window.location.
window.location.href = '/accounts/login/?next=' +
// Redirect the user on a 404.
if (response.status == '404') {
// Redirect to a 404 page.
window.location.href = '/#/';
本文翻译自StackoverFlow，英语好的童鞋可直接参考原文：angular-ui-route中重定向页面js代码怎么写_百度知道angularJs ui.router 刷新页面404 处理方法 - 推酷
angularJs ui.router 刷新页面404 处理方法
使用angularjs的ui.router做单页应用，如果你刷新页面会发现没有回到你当前的页面而是显示了404页面，如果说你的代码运行在后台服务下比如Apache或者别的服务下，这个应该是你的后台服务的路由生效了，遇到这样的问题你需要让搞后台的同事们帮你把页面都重定向到的你首页来，并且你需要让要把当时页面的参数传回来，然后通过otherwise的function取回参数，这样就可以做到刷新还回到当前页面了，这个是我的处理方法，不知道有没有更好的方法，有的话可以告知下~加入你的url是/index.html?url=/start/home
$urlRouterProvider.otherwise(function($injector, $location){
return $location.search().url || '/';
已发表评论数()
请填写推刊名
描述不能大于100个字符!
权限设置： 公开
仅自己可见
正文不准确
标题不准确
排版有问题
主题不准确
没有分页内容
图片无法显示
视频无法显示
与原文不一致/ Angular中在前后端分离模式下实现权限控制 – 基于RBAC
Related posts