How to referer to a page of ember js in web.xml document (for applying jaas authentication)

Question

I'm new to ember js I need to apply Jaas authentication to my app whose front end is built on Ember JS and backend is done using servlets. I build the ember js part and run it on my tomcat server so, technically my application is on tomcat. So i tried to apply security constraints on those ember pages or routes. When I hit the protected URL, the protected page gets loaded instead of the page getting redirected to the login route.

Here is the web.xml file

<security-constraint>
        <web-resource-collection>
             <web-resource-name>admin</web-resource-name>
             <url-pattern>/admin</url-pattern>
        </web-resource-collection>
        <auth-constraint>
             <role-name>admin</role-name>
        </auth-constraint>
    </security-constraint>
    
    <security-role>
        <role-name>admin</role-name>
    </security-role>
    
    <login-config>
         <auth-method>FORM</auth-method>
         <realm-name>studentDB_ember</realm-name>
         <form-login-config>
              <form-login-page>/login</form-login-page>
             <form-error-page>/error-login</form-error-page>
         </form-login-config>
    </login-config>

I know something is wrong with my xml page. The other parts of my authentication works fine. I can't find the correct way to represent the url of my ember page. Should I mention a path on router.js? I tried, it still doesn't work. Please let me know what am I doing wrong and how I should configure my xml so that the security contraints are applied appropriately and that my authentication works properly.

FYI: I have mentioned the location type as hash'#' in my environment.js file. and my link looks like this http://localhost:8085/test_auth/#/admin. It would direct me to the login page if its not authenticated and to the error page if the user name or password is wrong. If everything goes well we can see the admin page.

Thanks in advance. Let me know If you need more info. Any help is appreciated.

Answer 1

If your ember app is served by the backend sending the same html on every route (common among single-page-apps), you'll want to let your backend serve the HTML and then handle the redirect on the frontend via beforeModel .

For example:

// app/routes/admin.js
import Route from '@ember/routing/route';
import { service } from '@ember/service';

export default class AdminRoute extends Route {
  @service router;

  beforeModel(/* transition */) {
    if (! isAuthenticated ) { // you'll need to define how to determine how isAuthenticated works -- this can be property on a service, an api call, etc.
      this.router.transitionTo('login'); 
    }
  }
}

Highly recommend looking at https://github.com/simplabs/ember-simple-auth and how they handle this sort of problem.