How to transit from a component to a route in ember - javascript

I have a popup component in which i have a button and on click of that if im in my target route (mainRoute) i just want to pass the query parameters to my current route, but if i'm in another route i just want to transit with new query parameters. I know neither transitionTo or transitionToroute work. Is there any way to do that?

The transitionTo wouldn't work because you don't have access to routing from inside your component context. You can add the routing support at any place in your app using -routing service like so:
export default Ember.Component.extend({
routing: Ember.inject.service('-routing'),
someFuncUsingRouting(){
let routing = this.get('routing');
routing.transitionTo('some-route');
}
});

This is my code for logout function that close the session and redirect you to /login route.
import Ember from 'ember';
export default Ember.Component.extend({
authManager: Ember.inject.service('session'),
routing: Ember.inject.service('route'),
tagName: '',
actions: {
invalidateSession() {
console.log("logout invalidateSession");
this.get('authManager').invalidate();
let routing = this.get('routing');
routing.transitionTo('login');
}
}
});
This is working code for:
ember-cli: 2.8.0
node: 7.1.0

Related

Using EmberJS and Oauth2, how can I modify the default route after invalidation?

My goal is to send the user to a different page/route other than the oauth default after invalidation. Currently the default is my root login page. How can I change this?
I have this logout code in app/controller/protected.js.
Specifically the .invalidate(); method is what I'm trying to modify.
import { inject as service } from '#ember/service';
export default Controller.extend({
session: service(),
actions: {
invalidateSession() {
this.get('session').invalidate();
}
}
});
This is my code in app/routes/protected.js
import Route from '#ember/routing/route';
import AuthenticatedRouteMixin from 'ember-simple-auth/mixins/authenticated-route-mixin';
export default Route.extend(AuthenticatedRouteMixin, {
});
Any help is much appreciated!

Redirect if already authenticated - ember simple auth

I have registration and login working for my Ember app but for some reason 'routeIfAlreadyAuthenticated' is not working currently. Here is my setup:
config/environment.js
'ember-simple-auth': {
authenticationRoute: 'auth.login',
routeIfAlreadyAuthenticated: 'rows',
routeAfterAuthentication: 'rows'
}
But if I go to say /auth/login after I'm signed in it doesn't redirect me to the rows route. Does anybody know what I could be doing wrong?
Your login route should extend unauthenticated-route-mixin mixin:
import Route from '#ember/routing/route';
import UnauthenticatedRouteMixin from 'ember-simple-auth/mixins/unauthenticated-route-mixin';
export default Route.extend(UnauthenticatedRouteMixin, {
});

Cannot perform ember data queries/rest call inside Ember.service

I'm using ember 2.12
Here's my route
import Ember from 'ember';
export default Ember.Route.extend({
rentalService: Ember.inject.service('rentals-service'),
model(){
this.get('rentalService').findRentals();
console.log('Inside route');
console.log(this.get('store'));
return this.get('store').findAll('rental');
}
});
Here's my ember rental-service
import Ember from 'ember';
export default Ember.Service.extend({
findRentals() {
console.log("Inside servce");
console.log(this.get('store'));
return "hello from servce";
}
});
Why is it I cannot access the ember-data on the rental-service? whenever I console .log this.get('store') inside the rental-service it returns an undefined. However on the routes, whenever I console.log the same code it returns this value.
Does this mean I cannot perform a rest call using ember data inside a service?
I'm using Mirage to mock a web-server/http requests
You cannot access the store inside an ember component/service. A workaround for this is to retrieve the store via dependency injection.
export default Ember.Service.extend({
store: Ember.inject.service('store'),
findRentals() {
console.log("Inside service");
console.log(this.get('store'));
return "hello from service";
}
});
Be wary if you have another service with a name of store, it might fetch that one.

Ember.js - How to get current user properties in abilities source file while using ember-can addon

How to get user object in abilities source file in Ember-can addon.
This is how my abilities file looks like.
import Ember from 'ember';
import { Ability } from 'ember-can';
export default Ability.extend({
canWrite: Ember.computed('user.isAdmin', function() {
return this.get('user.isAdmin');
})
});
According to the official documentation:
Injecting the user
How does the ability know who's logged in? This depends on how you implement it in your app!
If you're using an Ember.Service as your session, you can just inject it into the ability:
// app/abilities/foo.js
import Ember from 'ember';
import { Ability } from 'ember-can';
export default Ability.extend({
session: Ember.inject.service()
});
If you're using ember-simple-auth, you'll probably want to inject the simple-auth-session:main session into the ability classes.
To do this, add an initializer like so:
// app/initializers/inject-session-into-abilities.js
export default {
name: 'inject-session-into-abilities',
initialize(app) {
app.inject('ability', 'session', 'simple-auth-session:main');
}
};
The ability classes will now have access to session which can then be used to check if the user is logged in etc...

render into alternative layout in ember 2

When I try to render into a alternative layout from a route, I get a error saying the layout is not found. Uncaught Error: Assertion Failed: You attempted to render into 'popup' but it was not found
Is it not possible to render into a alternative layout? I want to render the view but without navigation.
If I render into application it works fine
My route looks like
import Ember from 'ember';
export default Ember.Route.extend({
model(params) {
return this.store.find('information', params.information_id);
},
renderTemplate: function() {
this.render('informations/show', {
into: 'popup'
});
}
});
The routes nesting will define your layout. So don`t compose routes with models in mind.
If you want your navigation only on your application route, put them in the application.index route. if it is not clear what is rendered, turn on debugging.(https://guides.emberjs.com/v1.10.0/understanding-ember/debugging/).
PS: we call it "outlet"

Categories