Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Relecture de examples/* #22

Merged
merged 5 commits into from
Oct 3, 2017
Merged
Show file tree
Hide file tree
Changes from 4 commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
8 changes: 3 additions & 5 deletions en/examples/async-data.md
Original file line number Diff line number Diff line change
@@ -1,8 +1,6 @@
---
title: Async Data (En)
description: Async Data example with Nuxt.js
title: Données asynchrones
description: Exemple de données asynchrones avec Nuxt.js
github: async-data
documentation: /guide/async-data
---

<p style="width: 294px;position: fixed; top : 64px; right: 4px;" class="Alert Alert--orange"><strong>⚠Cette page est actuellement en cours de traduction française. Vous pouvez repasser plus tard ou <a href="https://github.com/vuejs-fr/nuxt" target="_blank">participer à la traduction</a> de celle-ci dès maintenant !</strong></p>
---
95 changes: 51 additions & 44 deletions en/examples/auth-routes.md
Original file line number Diff line number Diff line change
@@ -1,45 +1,47 @@
---
title: Auth Routes (En)
description: Authenticated routes example with Nuxt.js
title: Authentification de routes
description: Exemple d'authentification de routes avec Nuxt.js
github: auth-routes
livedemo: https://nuxt-auth-routes.gomix.me
liveedit: https://gomix.com/#!/project/nuxt-auth-routes
---

# Documentation

> Nuxt.js can be used to create authenticated routes easily.
> Nuxt.js peut être utilisé pour créer des routes authentifiées facilement.
Copy link

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Nuxt.js peut être utilisé pour créer facilement des routes authentifiées facilement .


## Using Express and Sessions
## Utilisation de Express et des sessions

<p style="width: 294px;position: fixed; top : 64px; right: 4px;" class="Alert Alert--orange"><strong>⚠Cette page est actuellement en cours de traduction française. Vous pouvez repasser plus tard ou <a href="https://github.com/vuejs-fr/nuxt" target="_blank">participer à la traduction</a> de celle-ci dès maintenant !</strong></p><p>To add the sessions feature in our application, we will use `express` and `express-session`, for this, we need to use Nuxt.js programmatically.</p>
Pour ajouter la fonctionnalité de sessions dans notre application, nous utiliserons `express` et `express-session`. Pour cela, nous devons utiliser Nuxt.js de manière programmatique.

Premièrement, nous installons les dépendances :

First, we install the dependencies:
```bash
yarn add express express-session body-parser whatwg-fetch
```

*We will talk about `whatwg-fetch` later.*
*Nous parlerons de `whatwg-fetch` dans un instant.*
Copy link

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Nous parlerons de whatwg-fetch plus tard.

"Dans un instant", cela correspond "à toute de suite" : ce n'est pas le cas

Copy link
Member Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Ça correspond plutôt à d'ici quelque minutes. Ce qui correspond au temps moyen de lecture avant qu'on se penche sur ce truc.

Je vais mettre plus loin sous entendu « plus loin dans le texte ».


Puis nous créons notre `server.js` :

Then we create our `server.js`:
```js
const { Nuxt, Builder } = require('nuxt')
const bodyParser = require('body-parser')
const session = require('express-session')
const app = require('express')()

// Body parser, to access req.body
// Analyse du corps de requête pour y accéder via `req.body`
app.use(bodyParser.json())

// Sessions to create req.session
// Mise en place de sessions pour y accéder via `req.session`
app.use(session({
secret: 'super-secret-key',
resave: false,
saveUninitialized: false,
cookie: { maxAge: 60000 }
}))

// POST /api/login to log in the user and add him to the req.session.authUser
// Accès à `/api/login` en POST pour authentifier l'utilisateur et l'ajouter à `req.session.authUser`
app.post('/api/login', function (req, res) {
if (req.body.username === 'demo' && req.body.password === 'demo') {
req.session.authUser = { username: 'demo' }
Expand All @@ -48,16 +50,16 @@ app.post('/api/login', function (req, res) {
res.status(401).json({ error: 'Bad credentials' })
})

// POST /api/logout to log out the user and remove it from the req.session
// Accès à `/api/logout` en POST pour désauthentifier l'utilisateur et le retirer de `req.session`
Copy link

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

désauthentifier => déconnecter

Copy link
Member Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Je mets « connecter » plus haut pour rester cohérant

app.post('/api/logout', function (req, res) {
delete req.session.authUser
res.json({ ok: true })
})

// We instantiate Nuxt.js with the options
// Nous instancions Nuxt.js avec les options
const isProd = process.env.NODE_ENV === 'production'
const nuxt = new Nuxt({ dev: !isProd })
// No build in production
// Pas de build en production
if (!isProd) {
const builder = new Builder(nuxt)
builder.build()
Expand All @@ -67,7 +69,8 @@ app.listen(3000)
console.log('Server is listening on http://localhost:3000')
```

And we update our `package.json` scripts:
Et nous modifions nos scripts dans `package.json` :

```json
// ...
"scripts": {
Expand All @@ -77,24 +80,25 @@ And we update our `package.json` scripts:
}
// ...
```
Note: You'll need to run `npm install --save-dev cross-env` for the above example to work. If you're *not* developing on Windows you can leave cross-env out of your `start` script and set `NODE_ENV` directly.

## Using the store
Note : vous devrez exécuter `npm install --save-dev cross-env` afin de faire fonctionner l'exemple précédent. Si vous n'êtes pas en train de développer sur Windows, vous pouvez laisser cross-env en dehors de votre script `start` et définir `NODE_ENV` directement.

## Utilisation du store

We need a global state to let our application know if the user is connected **across the pages**.
Nous avons besoin d'un état global pour informer notre application si l'utilisateur est **connecté sur les pages**.
Copy link

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Nous avons besoin d'un état global pour savoir si l'utilisateur est toujours connecté sur les différentes pages de notre application.

"across" dans cette phrase indique le passage d'une page à une autre, donc ne pas perdre la connexion lors du passage d'une page à l'autre. Ma proposition me parait plus en adéquation avec l'original. Ton avis ?

Copy link
Member Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

je vais mettre « reste connecté entre les pages » pour coller à across effectivement.


To let Nuxt.js use Vuex, we create a `store/index.js` file:
Pour laisser Nuxt.js utiliser Vuex, nous créons un fichier `store/index.js`:

```js
import Vue from 'vue'
import Vuex from 'vuex'

Vue.use(Vuex)

// Polyfill for window.fetch()
// Polyfill pour `window.fetch()`
require('whatwg-fetch')

const store = () => new Vuex.Store({
const store = new Vuex.Store({

state: {
authUser: null
Expand All @@ -115,16 +119,17 @@ const store = () => new Vuex.Store({
export default store
```

1. We import `Vue` and `Vuex` (included in Nuxt.js) and we tell Vue to use Vuex to let us use `$store` in our components
2. We `require('whatwg-fetch')` to polyfill the `fetch()` method across all browsers (see [fetch repo](https://github.com/github/fetch))
3. We create our `SET_USER` mutation which will set the `state.authUser` to the connected user
4. We export our store instance to Nuxt.js can inject it to our main application
1. Nous importons `Vue` et `Vuex` (inclus dans Nuxt.js) et nous indiquons à Vue d'utiliser Vuex afin de pouvoir utiliser `$store` dans nos composants.
2. Nous utilisons `require('whatwg-fetch')` afin d'obtenir un polyfill pour la méthode `fetch()` pour tous les navigateurs (consultez le [dépôt fetch](https://github.com/github/fetch)).
3. Nous créons notre mutation `SET_USER` qui va instancier `state.authUser` avec l'utilisateur connecté.
4. Nous exportons notre instance du *store* vers Nuxt.js afin qu'il puisse l'injecter dans notre application principale.

### nuxtServerInit() action
### Fonction nuxtServerInit()

Nuxt.js will call a specific action called `nuxtServerInit` with the context in argument, so when the app will be loaded, the store will be already filled with some data we can get from the server.
Nuxt.js appelle une action spécifique nommée `nuxtServerInit` avec le contexte comme argument. Ainsi, lorsque l'application sera chargée, le store sera déjà rempli avec certaines données que nous pouvons obtenir du serveur.
Copy link

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

appelle => appellera


Dans notre `store/index.js`, nous pouvons ajouter l'action `nuxtServerInit` :

In our `store/index.js`, we can add the `nuxtServerInit` action:
```js
nuxtServerInit ({ commit }, { req }) {
if (req.session && req.session.authUser) {
Expand All @@ -133,18 +138,19 @@ nuxtServerInit ({ commit }, { req }) {
}
```

To make the data method asynchronous, nuxt.js offers you different ways, choose the one you're the most familiar with:
Pour rendre la méthode de données asynchrone, Nuxt.js vous offre différents moyens, choisissez celui avec lequel vous êtes le plus à l'aise :

1. Retourner une `Promise`, Nuxt.js attendra la résolution de la promesse avant d'afficher le composant.
2. En utilisant [`async` / `await`](https://github.com/lukehoban/ecmascript-asyncawait) ([en savoir plus](https://zeit.co/blog/async-and-await)).

1. returning a `Promise`, nuxt.js will wait for the promise to be resolved before rendering the component.
2. Using the [async/await proposal](https://github.com/lukehoban/ecmascript-asyncawait) ([learn more about it](https://zeit.co/blog/async-and-await))
### L'action login()

### login() action
Nous ajoutons une action `login` qui sera appelée à partir de nos composants de pages pour connecter l'utilisateur :

We add a `login` action which will be called from our pages component to log in the user:
```js
login ({ commit }, { username, password }) {
return fetch('/api/login', {
// Send the client cookies to the server
// Envoyer les cookies client au serveur
Copy link

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Envoyer => Envoie

credentials: 'same-origin',
method: 'POST',
headers: {
Expand All @@ -168,12 +174,12 @@ login ({ commit }, { username, password }) {
}
```

### logout() method
### La méthode logout()

```js
logout ({ commit }) {
return fetch('/api/logout', {
// Send the client cookies to the server
// Envoyer les cookies au serveur
Copy link

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Envoyer => Envoie

credentials: 'same-origin',
method: 'POST'
})
Expand All @@ -183,24 +189,25 @@ logout ({ commit }) {
}
```

## Pages components
## Composants de pages

Ensuite, nous pouvons utiliser `$store.state.authUser` dans nos composants de pages pour vérifier si l'utilisateur est connecté ou non dans notre application.

Then we can use `$store.state.authUser` in our pages components to check if the user is connected in our application or not.
### Rediriger l'utilisateur s'il n'est pas connecté

### Redirect user if not connected
Ajoutons une route `/secret` dont le contenu ne peut être vu que par un utilisateur connecté :

Let's add a `/secret` route where only the connected user can see its content:
```html
<template>
<div>
<h1>Super secret page</h1>
<router-link to="/">Back to the home page</router-link>
<h1>Page super secrète</h1>
<router-link to="/">Retour à l'accueil</router-link>
</div>
</template>

<script>
export default {
// we use fetch() because we do not need to set data to this component
// Nous utilisons`fetch()` car nous n'avons pas besoin d'associer les données à ce composant
fetch ({ store, redirect }) {
if (!store.state.authUser) {
return redirect('/')
Expand All @@ -210,4 +217,4 @@ export default {
</script>
```

We can see in the `fetch` method that we call `redirect('/')` when our user is not connected.
Nous pouvons voir dans la méthode `fetch` que nous appelons `redirect('/')` lorsque notre utilisateur n'est pas connecté.
6 changes: 2 additions & 4 deletions en/examples/cached-components.md
Original file line number Diff line number Diff line change
@@ -1,8 +1,6 @@
---
title: Cached Components (En)
description: Cached Components example with Nuxt.js
title: Composants en cache
description: Exemple de composants mis en cache avec Nuxt.js
github: cached-components
documentation: /api/configuration-cache
---

<p style="width: 294px;position: fixed; top : 64px; right: 4px;" class="Alert Alert--orange"><strong>⚠Cette page est actuellement en cours de traduction française. Vous pouvez repasser plus tard ou <a href="https://github.com/vuejs-fr/nuxt" target="_blank">participer à la traduction</a> de celle-ci dès maintenant !</strong></p>
8 changes: 3 additions & 5 deletions en/examples/custom-loading.md
Original file line number Diff line number Diff line change
@@ -1,9 +1,7 @@
---
title: Custom Loading Component (En)
description: Custom Loading Component example with Nuxt.js
title: Composant de chargement personnalisé
description: Exemple de composant de chargement personnalisé avec Nuxt.js
github: custom-loading
livedemo: https://custom-loading.nuxtjs.org
documentation: /api/configuration-loading
---

<p style="width: 294px;position: fixed; top : 64px; right: 4px;" class="Alert Alert--orange"><strong>⚠Cette page est actuellement en cours de traduction française. Vous pouvez repasser plus tard ou <a href="https://github.com/vuejs-fr/nuxt" target="_blank">participer à la traduction</a> de celle-ci dès maintenant !</strong></p>
---
10 changes: 4 additions & 6 deletions en/examples/custom-routes.md
Original file line number Diff line number Diff line change
@@ -1,9 +1,7 @@
---
title: Custom Routes (En)
description: Custom Routes example with Nuxt.js
title: Routes personnalisées
description: Exemple de routes personnalisées avec Nuxt.js
github: custom-routes
livedemo: https://custom-routes.nuxtjs.org
documentation: /guide/routing#dynamic-routes
---

<p style="width: 294px;position: fixed; top : 64px; right: 4px;" class="Alert Alert--orange"><strong>⚠Cette page est actuellement en cours de traduction française. Vous pouvez repasser plus tard ou <a href="https://github.com/vuejs-fr/nuxt" target="_blank">participer à la traduction</a> de celle-ci dès maintenant !</strong></p>
documentation: /guide/routing#routes-dynamiques
---
8 changes: 3 additions & 5 deletions en/examples/global-css.md
Original file line number Diff line number Diff line change
@@ -1,9 +1,7 @@
---
title: Global CSS (En)
description: Global CSS example with Nuxt.js
title: CSS global
description: Exemple de CSS global avec Nuxt.js
github: global-css
livedemo: https://global-css.nuxtjs.org
documentation: /api/configuration-css
---

<p style="width: 294px;position: fixed; top : 64px; right: 4px;" class="Alert Alert--orange"><strong>⚠Cette page est actuellement en cours de traduction française. Vous pouvez repasser plus tard ou <a href="https://github.com/vuejs-fr/nuxt" target="_blank">participer à la traduction</a> de celle-ci dès maintenant !</strong></p>
---
10 changes: 4 additions & 6 deletions en/examples/hello-world.md
Original file line number Diff line number Diff line change
@@ -1,11 +1,9 @@
---
title: Hello World (En)
description: Hello World example with Nuxt.js
title: Hello World
description: Exemple de Hello World avec Nuxt.js
github: hello-world
youtube: https://www.youtube.com/embed/kmf-p-pTi40
livedemo: https://hello-world.nuxtjs.org
liveedit: https://gomix.com/#!/project/nuxt-hello-world
documentation: /guide/installation#starting-from-scratch
---

<p style="width: 294px;position: fixed; top : 64px; right: 4px;" class="Alert Alert--orange"><strong>⚠Cette page est actuellement en cours de traduction française. Vous pouvez repasser plus tard ou <a href="https://github.com/vuejs-fr/nuxt" target="_blank">participer à la traduction</a> de celle-ci dès maintenant !</strong></p>
documentation: /guide/installation#commencer-depuis-z-ro
---
8 changes: 3 additions & 5 deletions en/examples/i18n.md
Original file line number Diff line number Diff line change
@@ -1,9 +1,7 @@
---
title: Internationalization (i18n) (En)
description: Internationalization (i18n) example with Nuxt.js
title: Internationalisation (i18n)
description: Exemple d'internationalisation (i18n) avec Nuxt.js
github: i18n
livedemo: https://i18n.nuxtjs.org
documentation: /guide/routing#middleware
---

<p style="width: 294px;position: fixed; top : 64px; right: 4px;" class="Alert Alert--orange"><strong>⚠Cette page est actuellement en cours de traduction française. Vous pouvez repasser plus tard ou <a href="https://github.com/vuejs-fr/nuxt" target="_blank">participer à la traduction</a> de celle-ci dès maintenant !</strong></p>
---
10 changes: 4 additions & 6 deletions en/examples/layouts.md
Original file line number Diff line number Diff line change
@@ -1,10 +1,8 @@
---
title: Layouts (En)
description: Layouts example with Nuxt.js
title: Mises en page
description: Exemple de mises en page avec Nuxt.js
github: custom-layouts
livedemo: https://nuxt-custom-layouts.gomix.me/
liveedit: https://gomix.com/#!/project/nuxt-custom-layouts
documentation: /guide/views#layouts
---

<p style="width: 294px;position: fixed; top : 64px; right: 4px;" class="Alert Alert--orange"><strong>⚠Cette page est actuellement en cours de traduction française. Vous pouvez repasser plus tard ou <a href="https://github.com/vuejs-fr/nuxt" target="_blank">participer à la traduction</a> de celle-ci dès maintenant !</strong></p>
documentation: /guide/views#mises-en-page
---
36 changes: 18 additions & 18 deletions en/examples/menu.json
Original file line number Diff line number Diff line change
@@ -1,33 +1,33 @@
[
{
"title": "Essentiel",
"title": "Essentiels",
"links": [
{ "name": "Hello world (En)", "to": "" },
{ "name": "SEO HTML Head (En)", "to": "/seo-html-head" }
{ "name": "Hello World", "to": "" },
{ "name": "Entête HTML SEO", "to": "/seo-html-head" }
]
},
{
"title": "Personnalisation",
"links": [
{ "name": "Cached Components (En)", "to": "/cached-components" },
{ "name": "Custom Loading (En)", "to": "/custom-loading" },
{ "name": "Custom Routes (En)", "to": "/custom-routes" },
{ "name": "Global CSS (En)", "to": "/global-css" },
{ "name": "Layouts (En)", "to": "/layouts" },
{ "name": "Middleware (En)", "to": "/middleware" },
{ "name": "Nested Routes (En)", "to": "/nested-routes" },
{ "name": "Plugins (En)", "to": "/plugins" },
{ "name": "Routes transitions (En)", "to": "/routes-transitions" }
{ "name": "Composants en cache", "to": "/cached-components" },
{ "name": "Composant de chargement personnalisé", "to": "/custom-loading" },
{ "name": "Routes personnalisées", "to": "/custom-routes" },
{ "name": "CSS global", "to": "/global-css" },
{ "name": "Mises en page (layouts)", "to": "/layouts" },
{ "name": "Middleware", "to": "/middleware" },
{ "name": "Routes imbriquées", "to": "/nested-routes" },
{ "name": "Plugins", "to": "/plugins" },
{ "name": "Transitions de routes", "to": "/routes-transitions" }
]
},
{
"title": "Avancées",
"title": "Avancé",
"links": [
{ "name": "Async Data (En)", "to": "/async-data" },
{ "name": "Auth Routes (En)", "to": "/auth-routes" },
{ "name": "Vuex Store (En)", "to": "/vuex-store" },
{ "name": "i18n (En)", "to": "/i18n" },
{ "name": "Testing (En)", "to": "/testing" }
{ "name": "Données asynchrones", "to": "/async-data" },
{ "name": "Authentification de routes", "to": "/auth-routes" },
{ "name": "Store Vuex", "to": "/vuex-store" },
{ "name": "i18n", "to": "/i18n" },
{ "name": "Tests", "to": "/testing" }
]
}
]
Loading