How to hide angular admin views - javascript

I want to make an angular app with routes and jwt auth, but I don't want normal users to see the HTML partials of admin views. What's the best way to do this with laravel and angular? People can just put "/partials/adminPage1.html" on the url and see the partial when they are not logged in. My API is secure but I don't want the html to be public.
I want it so this is public:
index.php, publicPartial1.html, publicPartial2.html, etc
and only logged in users can use these files:
admin.php, adminPartial1.html, adminPartial2.html

You can/need to approach this in a few ways:
when "someone" puts "/partials/adminPage1.html" you need to check in the sever side (by the service you are checking it's permissions/role) then display/redirect to the appropriate route with ReturnUrl in the query for after login redirect.
You can be more secured by downloading the routes from the server by requesting them first (per user/role/permission) from a dedicated service, but then you'll need to bootstrap your AngularJS, since routing needs to be loaded with AngularJS life cycle, so in that case you are getting the routes, building them in a provider while bootstrapping AngularJS after getting the routes from the designated service as I mentioned.
* I would suggest to simply implement option (1) which is straight forward and most commonly used. *

Related

Routing in VUE.js

So I have a routes.js file to handle my routing in my VUE app and I have used it to transition between components successfully using a router-link tag. However I would now like to execute routes using javascript. For example after I receive an authentication response from my server I would like to transition from the login page to my home page. What can I do to execute a route when I want to?
You can programmatically route using router.push('home'). Here is a a reference to see more options available.

Permission route on static file express JS

I am trying to authenticate user when he request some page that has static route.
app.use(express.static(__dirname + '/public/app');
Assume that the folder "templates" is under the path above ('/public/app/templates') :
app.get('/templates/permissionPage.html',function(req,res){
// if user is authorized.. reutrn the page,
else return 401..
});
my routing even don't enter the get request of the page. how can I handle that request?
I want that only specific users can access this page, although he got static route.
I am using angularJS on my front-end
Thank you
You have two options:
Easy one: auth users on your web-server (proxy-server). Docs for Nginx, and for Apache
Hard one: Build accounts and auth module for your app. This will require work with storage (database), logic, and UI/UX. Or use ready solutions, like PassportJS

Angular ui-router: dynamically add states not during config

Like this question, I want to dynamically add ui-router states, but I'm not sure how to do it given the following:
We start with a small set of routes (max 5) that allow the user to navigate the login process: The user logs in (multi step login process), then selects the product type and role they want to use (assuming user has more than one product type/role, else they will bypass this view). At that point, I want to go out to my service and get the list of routes the user has access to, given the userid, product type, & role - I plan to send down an array of data structures that very closely match what is provided to $stateProvider.state(...).
In my app.run.js, I am checking $rootScope.$on("$stateChangeStart" and moving the user along from view to view in the multi-step login process and therefore know when I need to go out to my service to load up the available routes.
When the routes are loaded, I'll probably put a flag in a cookie to indicate that it was properly loaded for this user/product/role.
I don't think a provider really makes sense here since I don't want the routes loaded at config. It feels wrong (not sure why) to call the service to load the routes in the stateChangeStart.
Is this approach a reasonable one?
Note: I also see that there is an outstanding request to be able to remove states from $stateProvider. In the meantime until this request is implemented, how do we clear the $stateProvider of routes (apart from a browser refresh)?
For adding states after the config phase, you should use the Future State functionality in the ui-router-extra package.
Since there's no official support for deleting routes, you could probably merge in this PR to get something going, but you'd have to add functionality to remove the condition from urlRouterProvider as well since that's a bug with that PR.

Invalid JavaScript path with MVC Multitenancy without Razor syntax

Scenario:
We have an API that we are building an Angular single page app for, and we require multiple tenants. Each tenant has specific access credentials that allow them to interact with their database. But I have to allow for the tenant to take this SPA and host it on their own website if they choose to, which is why I have made it a very generic Angular SPA. We cannot expose the security credentials to the API in JavaScript, so it takes a server side component. I am using MVC routing to interpret which tenant the user is going to, then it acquires a session token and passes it to the JavaScript so the SPA will function using that token.
Normally, with this scenario if you are using Razor, you can just use bundling or the virtual directory (~) in your JavaScript src attribute. However, since it is pure HTML, it has no clue what ~ means.
Here is the routes I have for the tenant:
routes.MapRoute(
name: "Default",
url: "{tenantName}/{controller}/{action}/{id}",
defaults: new { controller = "Home", action = "Index", id = UrlParameter.Optional }
);
So a typical URL will look like:
http://localhost:51982/Tenant2/Home
With the JavaScript src referencing:
<script src="Scripts/angular.min.js"></script>
Of course, this causes the URL to look like:
http://localhost:51982/Tenant2/Scripts/angular.min.js
Which will result in a 404 error. Now, if I change it to:
<script src="/Scripts/angular.min.js"></script>
It will work because it goes to the root of the site. That is great, up until I have to deploy it to as a Web Application rather than a website like:
http://localhost:51982/WebApp1/Tenant2/Home
So ideally, I'm trying to find a way to force MVC to strip out the Tenant identifier of the URL if the reference goes to an actual file name. The only way I can find that it will work is that I have to just use /Scripts/xxxx.js and so the site will only work when set up as a Website and not a Web Application. I was hoping someone might have come across this unique scenario before.

AngularJS html5mode and hard 404

I have a AngularJS app working with html5mode set to true.
Currently, the app shows a soft 404 page, with the .otherwise setting in the router.
Is there a way I could serve actual 404 HTTP response, for the sake of SEO while using html5mode?
If I understand correctly what you want, you have to do the following:
hard redirect the browser (bypassing the angular routing) on the otherwise path, with something like this:
$routeProvider
.otherwise({
controller: function () {
window.location.replace('/404'); // your custom 404 page
// or a non existing page
}
});
if you have a regular single-page-application where all the server request are redirected to the same SPA entry point, you have to configure on your server to make a routing exception for your custom 404 page, which will should also be served with a 404 status.
Otherwise, I can't see how you would do that with just History API, without an external request, because it's whole point in angular routing is to bypass external requests.
If you just want non-existing routes to return 404, then you must configure your server to match all your angular routes, and return 404 otherwise.
Seach engines works with SPA applications through prerendered pages, using _escaped_fragment_ . And you can use Prerender.io (or simply PhantomJS) to generate any status codes for search engines, like this https://prerender.io/documentation/best-practices
But this schema is deprecated by Google: http://googlewebmastercentral.blogspot.ru/2015/10/deprecating-our-ajax-crawling-scheme.html At this moment Google tries to understand your JS with usual crawling schema.
Hard redirection to 404.html page is not a good practice: url must stay the same, like https://stackoverflow.com/somepage
You can try Angular2 with server rendering feature: https://docs.google.com/document/d/1q6g9UlmEZDXgrkY88AJZ6MUrUxcnwhBGS0EXbVlYicY/edit
You have to make your server issue 404s. Angular cannot help in anyway here.

Categories