Tutorial de Sails.

js: Creación del Modelo Usuario y Autenticación

BACKEND (/BLOG/CATEGORIA/BACKEND/)

Javier Delgado Magdalena

Blog (/blog/?ref=post)   3
24 JUNIO 2015

Lo primero que vamos a hacer es crear el modelo y el controlador , para ello ejecutaremos la siguiente
sentencia en la consola:

~/videoclub $ sails generate api user

Mediante el atributo api generamos el modelo y el controlador; Si quisiéramos crear únicamente el modelo
utilizaríamos el atributo model ; Y si quisiéramos crear únicamente el controlador utilizaríamos el atributo
controller .

Ahora, en el modelo escribiremos los siguiente:


 /**
* User.js
*
* @description :: TODO: You might write a short summary of how this model works and what i
t represents here.
* @docs :: http://sailsjs.org/#!documentation/models
*/

module.exports = {

attributes: {

name: {
type: 'string',
required: true
},
lastname: {
type: 'string',
required: true
},
email: {
type: 'string',
required: true,
unique: true
},
encryptedPassword: {
type: 'string'
},

// Este método es para evitar pasar toda la información del modelo

// Evitamos pasar los siguientes parámetros: password, confirmation, encryptedpassword
y _csrf.
toJSON: function() {
var obj = this.toObject();
delete obj.password;
delete obj.confirmation;
delete obj.encryptedPassword;
delete obj._csrf;
return obj;
}
}
};

Los atributos que permite sails (http://sailsjs.org/#!/documentation/concepts/ORM/Attributes.html) son

los siguientes: string , text , integer , �oat , date , datetime , boolean , binary , array , json , email .

Además, podemos especi�car si el atributo es obligatorio, único, su valor por defecto, etc. Todo esto nos
permite crear un modelo de manera muy simple y nos abstrae a la hora de crearlo en la base de datos
gracias a waterline .

Dentro del modelo podemos crear los métodos que deseemos y unos callbacks que se ejecutarán antes de
ciertas acciones.

Callbacks on create

beforeValidate: fn(values, cb)

afterValidate: fn(values, cb)

beforeCreate: fn(values, cb)

afterCreate: fn(newlyInsertedRecord, cb)

Callbacks on update

beforeValidate: fn(valuesToUpdate, cb)

afterValidate: fn(valuesToUpdate, cb)

beforeUpdate: fn(valuesToUpdate, cb)


 afterUpdate: fn(updatedRecord, cb)

Callbacks on destroy

beforeDestroy: fn(criteria, cb)

afterDestroy: fn(destroyedRecords, cb)

Más adelante veremos como utilizarlos.

Después iremos a views y crearemos la carpeta user y dentro de dicha carpeta los �cheros index.ejs :

<div class="container">
<h3>Usuarios
<table class='table'>
<tr>
<th>ID
<th>Nombre
<th>Apellidos
<th>Email
<th>
<th>
<th>
</tr>
<% _.each(users, function(user) { %>
<tr data-id="<%= user.id %>" data-model="user">
<td><%= user.id %>
<td><%= user.name %>
<td><%= user.lastname %>
<td><%= user.email %>
<td><a href="/user/show/<%= user.id %>" class="btn btn-sm btn-primary">Show</a>
<td><a href="/user/edit/<%= user.id %>" class="btn btn-sm btn-warning">Edit</a>
<td><form action="/user/destroy/<%= user.id %>" method="POST">
<input type="hidden" name="_method" value="delete"/>
<input type="submit" class="btn btn-sm btn-danger" value="Delete"/>
<input type="hidden" name="_csrf" value="<%= _csrf %>" />
</form>
</td>
</tr>
<% }) %>
</table>
<a href="/user/new">Crear Nuevo Usuario</a>
</div>

Como podemos ver lo que hacemos es crear una tabla donde mostraremos la información de cada usuario
creado.

Respecto al código podemos ver la siguiente línea: <% _.each(user, function(user) { %>

Lo que hace es recorrer cada uno de los usuarios (users) y llama a la funcion function(user) donde le pasa el
user.id buscando dentro del modelo mediante data-id pasandole el nombre del modelo: data-
model="user" .


 <% _.each(users, function(user) { %>
<tr data-id="<%= user.id %>" data-model="user">
<td><%= user.id %>
<td><%= user.name %>
<td><%= user.lastname %>
<td><%= user.email %>
<td><a href="/user/show/<%= user.id %>" class="btn btn-sm btn-primary">Show</a>
<td><a href="/user/edit/<%= user.id %>" class="btn btn-sm btn-warning">Edit</a>
<td><form action="/user/destroy/<%= user.id %>" method="POST">
<input type="hidden" name="_method" value="delete"/>
<input type="submit" class="btn btn-sm btn-danger" value="Delete"/>
<input type="hidden" name="_csrf" value="<%= _csrf %>" />
</form>
</td>
</tr>
<% }) %>

Y ahora el �chero new.ejs :

<form action="/user/create" method="POST" class="form-signin">

<h2 class="form-signin-heading"> Crear Usuario
<div class="control-group">
<input type="text" class="form-control" placeholder="Nombre" name="name">
</div>
<div class="control-group">
<input type="text" class="form-control" placeholder="Apellidos" name="lastname">
</div>
<div class="control-group">
<input type="text" class="form-control" placeholder="Email" name="email">
</div>
<div class="control-group">
<input type="password" class="form-control" placeholder="Contraseña" name="passw
ord">
</div>
<div class="control-group">
<input type="password" class="form-control" placeholder="Repita Contraseña" name
="confirmation">
</div>
<br/>
<input type="submit" class="btn btn-lg btn-primary btn-block" value="Create User
"/>
<input type="hidden" name="_csrf" value="<%=_csrf %>"/>
</form>

Ahora vamos al controlador y cremos los métodos para dichas vistas. Los nombres serán los que están en el
action .


 /**
* UserController
*
* @description :: Server-side logic for managing users
* @help :: See http://links.sailsjs.org/docs/controllers
*/

module.exports = {
'new': function (req, res) {
res.view();
},
index: function (req, res) {
User.find(function foundUser (err, users) {
if(err) return res.redirect('/user/new');
res.view({
users: users
});
});
},
create: function(req, res) {
User.create(req.params.all(), function userCreated(err, user) {
if (err) return res.redirect('/user/new');
res.redirect('/user/show/' + user.id);
});
}
};

Finalmente, accedemos al archivo routes.js y añadimos una nueva ruta para que cuando accedamos a
cualquier vista de user no redireccione a 403, sino que permita renderizar las vistas. Para ello añadiremos
el siguiente código debajo de la ruta raíz con una coma (,).

module.exports.policies = {

// '*': true,

'user': {
'new': true,
index: 'sessionAuth',
'*': true
}
};

Que signi�ca esto, pues vamos a explicar:

La parte comentada, // '*': true, signi�ca que cualquier vista que se muestre tendrá todos los accesos y
permisos abiertos.

Ahora hemos insertado 'user' que es el nombre del modelo y dentro damos los permisos para cada método
del controlador. Como podemos ver para poder acceder a 'index' deberemos estar autenticados, si no lo
estamos nos redireccionará la vista 'new' (dentro del metodo create: if (err) return res.redirect('/user
/new'); ). sessionAuth hace referencia al �chero sessionAuth.js que está en api/policies.

Y para el resto de operaciones ( '*' ) tenemos todos los accesos, es decir no tenemos ninguna reestricción,
como la necesidad de estar autenticados.

3 Comentarios - Únete a la conversación

INICIA SESIÓN PARA COMENTAR (/ACCOUNTS/LOGIN/?NEXT=/BLOG/TUTORIAL-DE-SAILSJS-CREACION-DEL-MODELO-USUARIO-Y-AU

 Miguel Leon

HACE 2 AÑOS

Hola Javier.
 Gracias por tu colaboración.

Soy principiante. Hice todo lo indicado y con http://localhost:1337/user pero sale un error, prohibiendo el ingreso:

"You don't have permission to see the page you're trying to reach.".

La explicación del tuto, para mi gusto y principiante muy ligera.

No hay los fuentes para cotejar,
(Debería haber un ejemplo con Pg o Mysql)

De todos modos hay que agradecer tu esfuerzo

RE SPONDE R ( /ACCOUNTS/LOGIN/ ?NEX T=/FORUM/DISCU SSION/9 7 7 / # M E S SAG E - 1 3 2 3)

Luis Sanchez
HACE 2 AÑOS

revisa el api/controllers/userController.js

dale http://localhost:1337/user/new

RE SPONDE R ( /ACCOUNTS/LOGIN/ ?NEX T=/FORU M / D I SC U SS I O N/ 9 7 7 / # M E S SAG E - 1 3 2 8)

 Ilmar López
HACE 2 AÑOS, 2 MESES

Buen aporte amigo, soy novato utilizando estas tecnologías y javaScript, me gustaría saber donde mas puedo encontrar tutoriales como este,
mucha gracias.

RE SPONDE R ( /ACCOUNTS/LOGIN/ ?NEX T=/FORUM/DISCU SSION/9 7 7 / # M E S SAG E - 1 1 2 8)

Prueba 7 días gratis COMENZAR 7 DÍAS GRATIS (/PRECIOS/)

AC C ESO C O M PLETO Y SIN C O M PRO M ISO S

(https://mixpanel.com/f/partner) (https://www.enisa.es)

 Avenida República Argentina, 26. 41011 Sevilla. +34 954 002 382 © 2017.  ( H T T
P S(://
H TWTP
W(SH
W.FAC
://
T T
W
P S(IH
://
ETB
TTW
T
O
EP
 R
O
W(S.C
H
K://
W.I
T
O.CT
T.M
MOP
N/O
M
SSE
://
TAG
/O
P
/OEPSN
PR
E.L
EW
N
AN
IN
W
M
E