I do not know which components that would make preventing forced browsing.
I have an Angular app with gulp and currently I can browse file from url.
ex: http://localhost/foldername/file.js
I would like to prevent this and let user only access routes that I setup with $stateProvider.
$urlRouterProvider.otherwise('/');
$stateProvider
.state('index', {
url: '/',
templateUrl: 'home/home.html',
controller: 'HomeCtrl'
})
.state('login', {
url: '/login',
templateUrl: 'login/login.html',
controller: 'LoginCtrl'
});
$locationProvider.html5Mode(true);
My gulp setting is
var connect = require('gulp-connect');
connect.server = {
livereload: true,
root: ['app'],
port: 8080
};
How can I prevent forced browsing ?
AngularJS: 1.4.9
gulp: 3.9.0
Related
It was working before when "/" was "/main", It was able to load main and dashboard as $urlRouterProvider.otherwise("/main/dashboard");
but now I have changed to "/" instead of "/main", it doesn't work, it loads only main and not dashboard. I have changed the code because I am using Active Directory Authentication Library, and it was having an issue of looping.
following is the code sample (config.js)
myapp.config(['$stateProvider', '$urlRouterProvider', '$locationProvider', '$compileProvider', '$httpProvider', 'adalAuthenticationServiceProvider',
function ($stateProvider, $urlRouterProvider, $locationProvider, $compileProvider, $httpProvider, adalProvider) {
$compileProvider.debugInfoEnabled(true);
$locationProvider.html5Mode(true).hashPrefix('!');
$urlRouterProvider.otherwise("/dashboard");
$stateProvider
// Main content
.state('main', {
abstract: false,
url: "/",
templateUrl: "/app/views/common/content.html"
})
.state('main.dashboard', {
url: "dashboard",
templateUrl: "/app/views/dashboard.html",
requireADLogin: true,
data: {
pageTitle: 'Dashboard'
}
})
.state('main.usermanagement', {
url: "/usermanagement",
template: "<div ui-view></div>",
requireADLogin: true
});
}])
Any ideas on how to fix this?
Problem is that you did't define URL in correct way
please use below like, url should be start with /
$urlRouterProvider.otherwise("/dasenter code herehboard");
$stateProvider
.state('main', {
abstract: false,
url: "/",
templateUrl: "/app/views/common/content.html"
})
.state('main.dashboard', {
url: "/dashboard", // you missed slash `/` here
templateUrl: "/app/views/dashboard.html",
requireADLogin: true,
data: {
pageTitle: 'Dashboard'
}
})
try it
Use this default childState for main:
$urlRouterProvider.when('/', '/dashboard');
And you should write url starting with '/'
.state('main.dashboard', {
url: "/dashboard",
templateUrl: "/app/views/dashboard.html",
requireADLogin: true,
data: {
pageTitle: 'Dashboard'
}
})
Following code has resolve my issue, if anyone faces this issue when using
Active Directory Authentication Library:
$urlRouterProvider.otherwise(function ($injector, $location) {
var $state = $injector.get("$state");
$state.go("main.dashboard");
});
What am I missing? Why would the Home template NOT load via .otherwise('/')? If I link to href="/#/" or ui-sref="home" everything works fine. However the Home template does NOT load if I try $urlRouterProvider.otherwise is working. The console does not show any errors.
Another interesting point is the URL is never modified when the first page loads. My other apps usually redirect from http://www.domain.com to http://www.domain.com/#/. This app is not showing the updated URL.
I have tried this in multiple browsers. No extensions or plugins are active.
Here are my routes:
(function () {
'use strict';
angular
.module('myapp')
.config(configRoutes);
configRoutes.$inject = ['$stateProvider', '$urlRouterProvider'];
function configRoutes ($stateProvider, $urlRouterProvider) {
$urlRouterProvider.otherwise('/');
$stateProvider
.state('home', {
url: '/',
templateUrl: 'app/partials/home.html'
})
.state('login', {
url: '/login',
templateUrl: 'app/partials/login.html',
})
.state('signup', {
url: '/signup',
templateUrl: 'app/partials/signup.html',
})
.state('logout', {
url: '/logout',
template: null,
controller: 'LogoutCtrl'
})
.state('profile', {
url: '/profile',
templateUrl: 'app/partials/profile.html',
});
}
})();
In my app I've tried to set this up correctly per every blog post I've seen talking about it but I can't get the app to load at the / url. I built the app with yeoman's angular generator so it uses grunt to spin up a connect server. But going to localhost:9000 doesn't show the app anymore since trying to add $locationProvider and set the html5location to true.
angular.module('bidrAdminApp', ['sky','ui.router','ngSanitize'])
.config(function ($stateProvider,$urlRouterProvider,$locationProvider) {
$stateProvider
.state('Home',{
url: '',
templateUrl: 'views/index.html',
controller: 'ApplicationCtrl'
})
.state('Home.Events', {
url: '/events',
templateUrl: 'views/events/index.html',
controller: 'EventsCtrl'
})
.state('Home.Event',{
url: '/events/{eventId}',
templateUrl: 'views/events/event/index.html',
controller: 'EventCtrl'
})
.state('Home.Event.Overview',{
parent: 'Home.Event',
url: '/overview',
templateUrl: 'views/events/event/overview.html',
})
.state('Home.Event.Settings',{
parent: 'Home.Event',
url: '/',
templateUrl: 'views/events/event/settings.html',
});
$urlRouterProvider.otherwise('');
$locationProvider.html5Mode(true);
});
I have the <base href="/" /> in my head of the base index.html file as well.
If I change the Home state to url: '/admin' it works going to /admin but this isn't the desired outcome. Not sure if I'm missing a configuration.
Change this line:
$urlRouterProvider.otherwise('');
to this line:
$urlRouterProvider.otherwise('/');
Currently I have a state 'home' which resides at the url '/'. After a user connects, the 'client' state is loaded, which also resides at the url '/' and the session is updated. Is it possible to make it so that if the user reloads the page, the 'client' state is loaded immediately instead of the 'home' state? If they were at different urls, I could simply have the server perform a redirect but I would like them both to be at the base url '/'. Is there some functionality in ui-router that would let me achieve this?
Here are my states:
app.config(function($stateProvider, $urlRouterProvider,$locationProvider) {
$stateProvider
.state('home', {
url: '/',
controller: 'HomePageConroller as homeCtrl',
templateUrl: '/views/partials/home.html',
onEnter: function($http,$state) {
$http.post('/checkconnected')
.success(function(data,status) {
if (data) {$state.go('client');}
});
}
})
.state('client', {
url: '/',
controller: 'ClientController as clientCtrl',
templateUrl: '/views/partials/client.html'
});
As you can see I am currently posting a check to the server to see if the client is connected and then doing a redirect from within the angular application, but I am not happy with this solution at all. The post takes time and so the home page is fully loaded and seen by the user before the client page is shown.
One solution I have considered is having another state called 'client redirect' that does reside at '/client' and has the same template as the 'client' state, which does the same $state.go on enter without the need of an $http.post (because the server already redirected based on the updated session). This would remove the delay and not flash the homescreen, however it does not seem elegant.
var app = angular.module("app", [
"ui.router"
]);
app.config(function ($stateProvider, $urlRouterProvider) {
$urlRouterProvider.otherwise('/index');
$stateProvider
.state("app", {
abstract: true,
url: '/app',
templateUrl: "views/layout/app-body.html"
})
.state("index", {
url: "/index",
templateUrl: "views/home.html",
controller: 'signinController'
})
.state("signin", {
url: "/signin",
templateUrl: "views/pages/signin.html",
controller: 'signinController'
})
.state("signup", {
url: "/signup",
templateUrl: "views/pages/signup.html",
controller: 'signupController'
})
.state('app.home', {
url: '/home',
templateUrl: 'views/home/home.html',
controller: 'homeController'
})
.state('app.dashboard', {
url: '/dashboard',
templateUrl: 'views/dashboard/dashboard.html',
controller: 'dashboardController'
})
.state('app.profile', {
url: '/profile',
templateUrl: 'views/pages/profile.html',
controller: 'profileController'
});
});
Visit http://embed.plnkr.co/IzimSVsstarlFviAm7S7/preview?
Okay here is how I solved this. I renamed the url of 'client' from '/' to '/client'. On my server the get request checks if the user is connected and redirects to get '/client' if so (which renders the exact same angular app only the url is different). Then I modified my client to state to onEnter change $location.path(). Realizing this is practically the same as $state.go, I used the event handler for $stateChangeStart to prevent the state transition. Final code looks like this:
app.config(function($stateProvider, $urlRouterProvider,$locationProvider) {
$stateProvider
.state('home', {
url: '/',
controller: 'HomePageConroller as homeCtrl',
templateUrl: '/views/partials/home.html'
})
.state('client', {
url: '/client',
controller: 'ClientController as clientCtrl',
templateUrl: '/views/partials/client.html',
onEnter: function($location){$location.path('/');}
});
$urlRouterProvider.otherwise('/');
$locationProvider.html5Mode(true);
});
app.run(['$rootScope', function($rootScope) {
$rootScope.$on('$stateChangeStart', function(event, toState, toParams, fromState, fromParams){
if (fromState.name == 'client' && toState.name == 'home') {
event.preventDefault();
}
});
}]);
If I can clean this up further please comment below.
I started building ionic app, and I want to change the views, I am not using tag, I have separate file for every view.
The states look like this:
var route = angular.module('route', []);
route.config(function($stateProvider, $urlRouterProvider) {
$stateProvider
.state('home', {
url: '/home',
abstract: true,
templateUrl: 'home.html',
})
.state('login', {
url: '/login',
templateUrl: 'login.html'
})
.state('register', {
url: '/register',
templateUrl: 'register.html'
})
.state('manage-booking', {
url: '/manage-booking',
templateUrl: 'manage_booking.html'
})
.state('clinic-list', {
url: '/clinic-list',
templateUrl: 'clinic_list.html'
})
$urlRouterProvider.otherwise('/home');
});
When I run the app, the url defaults to '/#/home'
I am not able to figure out why is it not loading the home page. When I change the otherwise to point to '/#/login', everything works.
Remove the abstract: true property (source)