I'm trying to implement Login feature and there is an redirect after success/failure using Express Router:
router.post('/login',
passport.authenticate('local', {successRedirect:'/dashboard', failureRedirect:'/login',failureFlash: true}),
function(req, res) {
res.redirect('/');
});
and after successfull login, I got Cannot GET /dashboard or in case of failure Cannot GET /login.
Is there some incompability between routing on the server (Express) and on the client side (Angular UI Router)? Should I use just one of the router and which one?
Here is the the code for UI Router:
angular
.module('app', [
'ngAnimate',
'ngAria',
'ngCookies',
'ngResource',
'ngTouch'
])
.config( function ($stateProvider, $urlRouterProvider, $locationProvider){
$stateProvider
.state('login', {
url: '/login',
templateUrl: 'views/login.html',
controller: 'LoginCtrl'
})
.state('home', {
url: '',
templateUrl: 'views/home.html',
controller: 'HomeCtrl'
})
.state('home.dashboard', {
abstract: true,
url: '/dashboard',
templateUrl: 'views/dashboard.html'
});
// For any unmatched url, send to /
$urlRouterProvider.otherwise('/');
$mdGestureProvider.skipClickHijack();
//remove the hashtag from URL
$locationProvider.html5Mode({
enabled: true,
requireBase: false
});
});
Your express router is fine. and it was a norm form submit, the page will properly redirect.
But as requests are made through ajax from Angular App, those redirects are not known to the app and hence doesn't do anything.
Make your dashboard or login controller evaluate the login status and then redirect from there.
The current code you wrote is not redirecting to the front end, its generating a new GET request, you need to handle the GET requests generated.
in your case
router.get('/dashboard',function(req,res){
res.redirect("full path of the url which you use in browser")
});
or try this
{successRedirect:'http://your front end domain/dashboard', failureRedirect:'http://your front end domain/login',failureFlash: true}
Related
I have the routing in Angular setup this way:
$stateProvider
.state('loginHome',
{
url: "/",
templateUrl: "scripts/features/account/views/login.html"
})
.state('login',
{
url: "/login",
templateUrl: "scripts/features/account/views/login.html"
})
So, whenever a user navigates to:
http://localhost/MyApp/
http://localhost/MyApp/login
The login view is rendered
How do I setup a route that when a user enters the below URL, it navigates them to login:
http://localhost/MyApp (no trailing slash)
Why not use otherwise() function of $urlRouterProvider, please include the $urlRouterProvider inside the app.config. So that all the other unrecognized routes are sent to login page! Also there are two states for login page, instead of that you can give it as.
JS:
$urlRouterProvider.otherwise('/');
$stateProvider
.state('login',
{
url: "/login",
templateUrl: "scripts/features/account/views/login.html"
})
I have used $stateProvider in my angular application for routing. Prob I'm facing here is, on logout I could navigate to login page,but the login controller is not getting reloaded as expected. Please find below the $stateProvider configured in my app
in controller.js
$location.url('/login');
.config(function($stateProvider, $urlRouterProvider) {
$stateProvider
// setup an abstract state for the tabs directive
.state('login', {
url: '/login',
templateUrl: 'templates/login.html',
controller: 'loginController'
})
.state('charts', {
url: '/charts',
templateUrl: 'templates/chart-screen.html',
controller: 'ChartController'
})
// if none of the above states are matched, use this as the fallback
$urlRouterProvider.otherwise('/login');
});
Controller is not reloaded because of caching, please refer below link:https://stackoverflow.com/a/31725101/6071335
I have using the Angular unsavedChanges Plugin to find the dirty forms and alert the user when he leave the page and state. Plugin working fine but is gives the alert twice. I have changed the UI router config but still the issue not fixed
angular
.module('app', ['unsavedChanges', 'ui.router'])
.config(['$stateProvider', '$urlRouterProvider', 'unsavedWarningsConfigProvider',
function($stateProvider, $urlRouterProvider, unsavedWarningsConfigProvider) {
$stateProvider
.state('admin', {
url: '/dashboard',
abstract: true,
templateUrl: "app/app.html"
})
.state('admin.dashboard', {
url: '/home',
templateUrl: 'app/dashboard/dashboard.html',
controller: 'DashboardCtrl'
})
unsavedWarningsConfigProvider.useTranslateService = false;
}
]);
I'm using adal.js with ui-router and believe I have everything configured correctly. Unfortunately, when adding requireADLogin to my states, nothing happens and I get the error Failed to load template: ./dashboard.html (HTTP status: undefined undefined)
Auth module
angular
.module('components.auth',
[
'ui.router',
'AdalAngular'
])
.config(['$httpProvider', 'adalAuthenticationServiceProvider', function($httpProvider, adalProvider) {
adalProvider.init({
instance: 'https://login.microsoftonline.com/',
...
// these are components that can be loaded such as nav without needing authentication
anonymousEndpoints: ['./root.html', './app.html', './app-nav.html', './app-sidebar.html']
},
$httpProvider);
}]);
Dashboard module
var dashboard = {
bindings: {
//
},
templateUrl: './dashboard.html',
controller: 'DashboardController'
};
angular
.module('components.dashboard')
.component('dashboard', dashboard)
.config(['$stateProvider', 'adalAuthenticationServiceProvider', function ($stateProvider, adalProvider) {
$stateProvider
.state('dashboard', {
parent: 'app',
url: '/dashboard',
component: 'dashboard',
requireADLogin: true,
resolve: {
}
});
}]);
According to chrome debug tools, the application never even attempts to be redirected to an auth portal:
How will I redirect my URL with a hah along.. Let us say I entered in the URL..
example.com/register
It should be redirected to
example.com/#/register
Is this possible?
AngularJs by default provides the routing functionality using $routeprovider or $stateProvider. You can use these providers in your config.
angular.config(['$stateProvider','$urlRouterProvider',function ($stateProvider,$urlRouterProvider) {
$stateProvider
.state('dashboard', {
url:'/dashboard',
abstract:true,
templateUrl: 'views/main.html'
})
.state('dashboard.home',{
url:'/home',
templateUrl:'views/home.html'
})
$urlRouterProvider.otherwise('/');
});