With the recent change regarding middleware https://nextjs.org/docs/messages/middleware-upgrade-guide.
Now the middleware also gets triggered by requests for /_next and /favicon.ico.
What is the best way to only trigger it for requests for /pages folder. There is the matcher but it would be cumbersome to type all of the pages in it.
I'm currently using middleware to check if cookies exist and redirect the user if the user accesses a page. E.g Redirect the user to /login if the user accesses / and the user is not logged in yet.
To avoid the middleware running when "/_next" or "/favicon.ico" routes are requested simply start your middleware function with:
const { pathname } = req.nextUrl
// Allow the requests if the following is true...
// 1) if the request is a system request /_next
// 2) if the request is to get the favicon.ico
if (pathname.startsWith('/_next') || pathname.startsWith('/favicon.ico')) {
return NextResponse.next()
}
Not sure it's the cleanest way but it works fine for me. Don't hesitate to tell me if I can make this better.
Now that middleware is stable (>=12.2), you can use a regex on the matcher to exclude some paths.
export const config = {
// matcher solution for public, api, assets and _next exclusion
matcher: "/((?!api|static|.*\\..*|_next).*)",
};
Ref: https://github.com/vercel/next.js/discussions/36308#discussioncomment-3758041
Here is the snippet of middleware:
// middleware.ts
import { NextResponse } from 'next/server'
import type { NextRequest } from 'next/server'
// This function can be marked `async` if using `await` inside
export function middleware(request: NextRequest) {
return NextResponse.redirect(new URL('/about-2', request.url))
}
// See "Matching Paths" below to learn more
export const config = {
matcher: '/about/:path*',
}
If you want middleware to run on all paths:
export const config = {
matcher: '/:path*',
}
Have you tried this.
I am trying to have protected routes like these: 1). loggedin user group routes 2.) admin routes, 3.) student routes, 4.) public routes. The LoggedInUser works as expected but the 2 other routes - schooladmin and students does not work as needed.
After logging in as an admin or as a student, according to the expectation the respective users should be able to go to the allowed urls but whenever, as an example, if a schooladmin admin goes to http://localhost/students it automatically redirects back to dashboard, and likewise for student. What am I to do right?
This route group allows only logged in users.
var LoggedInUser = FlowRouter.group({
name: 'currentUser', triggersEnter: [function (context, redirect) {
if (Meteor.loggingIn() || Meteor.userId()) {
FlowRouter.watchPathChange();
let currentRoute = FlowRouter.current();
if (!currentRoute.path) {
FlowRouter.go('/dashboard');
} else {
FlowRouter.go(currentRoute.path);
}
} else {
redirect('/');
}
}]
});
This is the route group for school admins
var schooladmin = LoggedInUser.group({
name: 'schooladmins', triggersEnter: [function (context, redirect) {
FlowRouter.watchPathChange();
let currentRoute = FlowRouter.current();
if (Roles.userIsInRole(Meteor.userId(), ['super-admin', 'admin'])) {
console.log(currentRoute.path);
FlowRouter.go(currentRoute.path);
} else {
redirect('dashboard');
}
}]
});
This is the route for students
var students = LoggedInUser.group({
name: 'students', triggersEnter:[function (context, redirect) {
FlowRouter.watchPathChange();
let currentRoute = FlowRouter.current();
if (Roles.userIsInRole(Meteor.userId(), ['manage-team', 'student-page'])) {
FlowRouter.go(currentRoute.path);
} else {
redirect('dashboard');
}
}]
});
Sample routes the groups are attached to
This sample route is for school admins only to access
schooladmin.route('/students', {
name: 'students', action(){
BlazeLayout.render('formrender', {formrend: 'student'});
}
});
this route is for student to access
students.route('/student/dashboard', {
name: 'students-dashboard', action(){
BlazeLayout.render('studentlayout', {studentrender: 'studentdashboard'});
}
});
The Roles package actually depends on a subscription, which means that if the subscription is not ready the Roles.userIsInRole method will always return false. And then your route fails, because FlowRouter always runs no matter what. This happens in very specific cases, but it happens and your users will notice.
Fortunately there is now a fix. We can have full control over when FlowRouter initializes.
There are 2 ways to achieve this.
Just above FlowRouter Declaration use Accounts.onLogin(function(user){}); method to check role and then redirect. (check user._id for Roles)
Click here for second solution https://medium.com/#satyavh/using-flow-router-for-authentication-ba7bb2644f42
i have a meteor app where i'm using nginx with an internal SSO service to authenticate. I'm able to do this successfully and retrieve user details in the nginx set http headers on the server Meteor.onConnection method.
At this point, i'm not sure what the best approach is to get access to the user details on the client side. I feel like i should use the built in Meteor Accounts but i'm not sure how to initiate the login process from the client since the user will not actually be logging in through the Meteor client but through a redirect that happens through nginx. I feel like i need a way to automatically initiate the login process on the meteor side to set up the meteor.users collection appropriately, but i can't figure out a way to do that.
Checkout the answers here. You can pass the userId (or in whatever you want to pass the user) through nginx to the server then onto the client to login. You can generate and insert the token in a Webapp.connectHandler.
import { Inject } from 'meteor/meteorhacks:inject-initial';
// server/main.js
Meteor.startup(() => {
WebApp.connectHandlers.use("/login",function(req, res, next) {
Fiber(function() {
var userId = req.headers["user-id"]
if (userId){
var stampedLoginToken = Accounts._generateStampedLoginToken();
//check if user exists
Accounts._insertLoginToken(userId, stampedLoginToken);
Inject.obj('auth', {
'loginToken':stampedLoginToken
},res);
return next()
}
}).run()
})
}
Now you can login on the client side with the help of the meteor-inject-initial package
import { Inject } from 'meteor/meteorhacks:inject-initial';
// iron router
Router.route('/login', {
action: function() {
if (!Meteor.userId()){
Meteor.loginWithToken(Inject.getObj('auth').loginToken.token,
function(err,res){
if (err){
console.log(err)
}
}
)
} else {
Router.go('/home')
}
},
});
i'm trying to redirect a user to 403 page when not authorized. I added roles 'admin', 'default-group' to CM9Cwq7HXD6yHjKRp and it's working like a charm on template level. But not working as expected on router.
My route groups are separated into 2 main group
// Public routes
var publicFlowRouter;
publicFlowRouter = FlowRouter.group({});
// Private routes
var privateFlowRouter;
privateFlowRouter = FlowRouter.group({
triggersEnter: [
function() {
var route;
if (!(Meteor.loggingIn() || Meteor.userId())) {
route = FlowRouter.current();
if (route.route.name !== 'home') {
Session.set('redirectAfterLogin', route.path);
}
return FlowRouter.go('home');
}
}
]
});
There isn't any problem for these routes but the problem starts with adminPrivateFlowRouter;
// Private routes extended for admin
var adminPrivateFlowRouter;
adminPrivateFlowRouter = privateFlowRouter.group({
triggersEnter: [
function() {
// If user is not authenticated redirect to homepage
console.log(Meteor.userId());
console.log(Roles.userIsInRole(Meteor.userId(), 'admin', 'default-group'));
if (Roles.userIsInRole(Meteor.userId(), 'admin', 'default-group')) {
console.log('Authenticated user');
} else {
console.log('403 Access Denied');
//return FlowRouter.go('home');
}
}
]
});
is not working solid. When i refresh the samepage console says sometimes
CM9Cwq7HXD6yHjKRp
false
403 Access Denied
CM9Cwq7HXD6yHjKRp
true
Authenticated user
I couldn't find where the problem is, thanks
See How to make FlowRouter wait for users collection on the client
You can solve your problem manually initializing FlowRouter with FlowRouter.wait() and FlowRouter.initialize() when Roles subscription is ready.
Angular 2 beta uses html5 routing by default.
However, when you go to a component and the route changes (eg http://localhost:5000/aboutus) and you reload/refresh the page, nothing is loaded.
The issue has been raised in this post also.
Most of the answers say that if we are going to pursue HTML5 routing in angular 2, then this issue of routing should be taken care of in server-side. More discussion here.
I am not sure how to handle this issue using the asp.net server environment.
Any angular 2 devs out there who also uses asp.net and encounters this issue?
PS. I'm using ASP.NET 5. My Angular 2 routes are using MVC routes.
The problem you're seeing has to do with the difference between Angular routing on the client and MVC server-side routing. You are actually getting a 404 Page Not Found error because the server does not have a Controller and Action for that route. I suspect you are not handling errors which is why it appears as if nothing happens.
When you reload http://localhost:5000/aboutus or if you were to try to link to that URL directly from a shortcut or by typing it into the address bar (deep linking), it sends a request to the server. ASP.NET MVC will try to resolve that route and in your case it will try to load the aboutusController and run the Index action. Of course, that's not what you want, because your aboutus route is an Angular component.
What you should do is create a way for the ASP.NET MVC router to pass URLs that should be resolved by Angular back to the client.
In your Startup.cs file, in the Configure() method, add an "spa-fallback" route to the existing routes:
app.UseMvc(routes =>
{
routes.MapRoute(
name: "default",
template: "{controller=Home}/{action=Index}/{id?}");
// when the user types in a link handled by client side routing to the address bar
// or refreshes the page, that triggers the server routing. The server should pass
// that onto the client, so Angular can handle the route
routes.MapRoute(
name: "spa-fallback",
template: "{*url}",
defaults: new { controller = "Home", action = "Index" }
);
});
By creating a catch-all route that points to the Controller and View that ultimately loads your Angular app, this will allow URLs that the server does not handle to be passed onto the client for proper routing.
In your Startup.cs add this to the Configure method. This must be before other app statements.
app.Use(async (context, next) => {
await next();
if (context.Response.StatusCode == 404 && !Path.HasExtension(context.Request.Path.Value)) {
context.Request.Path = "/index.html"; // Put your Angular root page here
await next();
}
});
My favorite solution is to add the following code to Global.asax.cs which very smoothly and reliably takes care of the issue:
private const string RootUrl = "~/Home/Index";
// You can replace "~Home/Index" with whatever holds your app selector (<my-app></my-app>)
// such as RootUrl="index.html" or any controller action or browsable route
protected void Application_BeginRequest(Object sender, EventArgs e)
{
// Gets incoming request path
var path = Request.Url.AbsolutePath;
// To allow access to api via url during testing (if you're using api controllers) - you may want to remove this in production unless you wish to grant direct access to api calls from client...
var isApi = path.StartsWith("/api", StringComparison.InvariantCultureIgnoreCase);
// To allow access to my .net MVCController for login
var isAccount = path.StartsWith("/account", StringComparison.InvariantCultureIgnoreCase);
if (isApi || isAccount)
{
return;
}
// Redirects to the RootUrl you specified above if the server can't find anything else
if (!System.IO.File.Exists(Context.Server.MapPath(path)))
Context.RewritePath(RootUrl);
}
You need use this routing in ASP.NET MVC
app.UseMvc(routes =>
{
routes.MapRoute("Default", "{*url}", new { #controller = "App", #action = "Index" });
});
Then you need set up SystemJS with basePath options
The feature you're looking for is URL rewrite. There are two possible ways to handle it. The classic way is to let IIS do the work, as described here:
https://stackoverflow.com/a/25955654/3207433
If you don't want to depend on IIS, you can instead handle this in the ASP.NET 5 middleware, as shown in my answer here:
https://stackoverflow.com/a/34882405/3207433
I'm not having any luck getting
routes.MapRoute("Default", "{*url}",
new { #controller = "App", #action = "RedirectIndex" });
to work. I still get a 404 with any client side route.
Update:
Figured out why the catch-all route wasn't working: I had an attribute route defined ([Route("api/RedirectIndex")]) and while the plain route can be directly accessed with the fallback route it didn't fire. Removing the attribute route made it work.
Another solution that seems to work just as easy as the catch-all route handler is to just create a custom handler that fires at the end of the middleware pipeline in Configure():
app.UseMvc(routes =>
{
routes.MapRoute(
name: "default",
template: "{controller=Home}/{action=Index}/{id?}");
});
//handle client side routes
app.Run( async (context) =>
{
context.Response.ContentType = "text/html";
await context.Response.SendFileAsync(Path.Combine(env.WebRootPath,"index.html"));
});
This basically ends up being the catch-all route that simply sends index.html out over the existing URL request if there was no other handler that picked up the request.
This works nicely even in combination with IIS Rewrite rules (in which case the above just won't ever get fired.
Wrote up a blog post on this topic:
Handling HTML5 Client Route Fallbacks in ASP.NET Core
Here are two more options for solving this problem. You can either add the hash location strategy to your app module.
import { LocationStrategy, HashLocationStrategy } from '#angular/common';
#NgModule({
imports: [.... ],
declarations: [...],
bootstrap: [AppComponent],
providers: [
{
provide: LocationStrategy,
useClass: HashLocationStrategy
}
]
})
export class AppModule { }
This option will only work for the parts of your Angular2 app that live on the Home ASP Controller
Your second option is to add routes to your ASP Controller that match your Angular 2 app routes and return the "Index" View
public class HomeController : Controller
{
public IActionResult Index()
{
return View();
}
[ActionName("Angular-Route1")]
public IActionResult AngularRoute1()
{
return View("Index");
}
public IActionResult Route2()
{
return View("Index");
}
}
Did you use:
directives: [RouterOutlet, RouterLink] in the component.
apply the #ZOXEXIVO's solution then, in your _Layout.cshtml add this:
<head>
<base href="/"/>
.....
</had>
You can use both the routing
when you call Home/Index from angular routing.
write
Home/Index.cshtml
<my-app></my-app>
app.routing.ts
const routes: Routes = [
{ path: '', redirectTo: '/Home/Index', pathMatch: 'full' },
{ path: 'Home/Index', component: DashboardComponent }
]
So When URL will be Home/Index
will load the component of active url so it will load dashboard component.
The above selected solution did not work for me I also got 404 after following all the comments to the T. I am using an angular5 app in an MVC5 app. I use the default index landing page as the start for the angular5. My angular app is in a folder named mvcroot/ClientApp/ but on ng build it puts the distributed files in mvcroot/Dist/ by altering one setting in the .angular-cli.json file with "outDir": "../Dist"
This solution did work though.
This way only routes in the Dist directory get the fall over. Now you can hit refresh every time and exact route for the angular5 app reloads while staying on the correct component. Be sure to put the catch all first. On a side note, if using a token auth in your angular5, save the token to window.localStorage (or some other mechanism outside your angular5 app) as hitting refresh will wipe out all memory where you you maybe storing your token in a global variable. This keeps the user from having to login again if they refresh.
routes.IgnoreRoute("{resource}.axd/{*pathInfo}");
routes.MapRoute(
"Catch All",
"dist/{*url}",
new { controller = "Home", action = "Index", id = UrlParameter.Optional });
routes.MapRoute(
name: "Default",
url: "{controller}/{action}/{id}",
defaults: new { controller = "Home", action = "Index", id = UrlParameter.Optional }
);