add auth-flow example

Author: yyx990803

Diff for: examples/auth-flow/app.js

@@ -0,0 +1,39 @@
+import Vue from 'vue/dist/vue'
+import VueRouter from 'vue-router'
+
+Vue.use(VueRouter)
+
+import auth from './auth'
+import App from './components/App.vue'
+import About from './components/About.vue'
+import Dashboard from './components/Dashboard.vue'
+import Login from './components/Login.vue'
+
+function requireAuth (route, redirect, next) {
+  if (!auth.loggedIn()) {
+    redirect({
+      path: '/login',
+      query: { redirect: route.fullPath }
+    })
+  } else {
+    next()
+  }
+}
+
+const router = new VueRouter({
+  mode: 'history',
+  base: __dirname,
+  routes: [
+    { path: '/about', component: About },
+    { path: '/dashboard', component: Dashboard, beforeEnter: requireAuth },
+    { path: '/login', component: Login },
+    { path: '/logout',
+      beforeEnter (route, redirect) {
+        auth.logout()
+        redirect('/')
+      }
+    }
+  ]
+})
+
+new Vue(Object.assign({ router }, App)).$mount('#app')

Diff for: examples/auth-flow/auth.js

@@ -0,0 +1,51 @@
+/* globals localStorage */
+
+export default {
+  login (email, pass, cb) {
+    cb = arguments[arguments.length - 1]
+    if (localStorage.token) {
+      if (cb) cb(true)
+      this.onChange(true)
+      return
+    }
+    pretendRequest(email, pass, (res) => {
+      if (res.authenticated) {
+        localStorage.token = res.token
+        if (cb) cb(true)
+        this.onChange(true)
+      } else {
+        if (cb) cb(false)
+        this.onChange(false)
+      }
+    })
+  },
+
+  getToken () {
+    return localStorage.token
+  },
+
+  logout (cb) {
+    delete localStorage.token
+    if (cb) cb()
+    this.onChange(false)
+  },
+
+  loggedIn () {
+    return !!localStorage.token
+  },
+
+  onChange () {}
+}
+
+function pretendRequest (email, pass, cb) {
+  setTimeout(() => {
+    if (email === '[email protected]' && pass === 'password1') {
+      cb({
+        authenticated: true,
+        token: Math.random().toString(36).substring(7)
+      })
+    } else {
+      cb({ authenticated: false })
+    }
+  }, 0)
+}

Diff for: examples/auth-flow/components/About.vue

@@ -0,0 +1,5 @@
+<template>
+  <div>
+    <h2>About</h2>
+  </div>
+</template>

Diff for: examples/auth-flow/components/App.vue

@@ -0,0 +1,41 @@
+<template>
+  <div id="app">
+    <h1>Auth Flow</h1>
+    <ul>
+      <li>
+        <router-link v-if="loggedIn" to="/logout">Log out</router-link>
+        <router-link v-if="!loggedIn" to="/login">Log in</router-link>
+      </li>
+      <li>
+        <router-link to="/about">About</router-link>
+      </li>
+      <li>
+        <router-link to="/dashboard">Dashboard</router-link>
+        (authenticated)
+      </li>
+    </ul>
+    <template v-if="$route.matched.length">
+      <router-view></router-view>
+    </template>
+    <template v-else>
+      <p>You are logged {{ loggedIn ? 'in' : 'out' }}</p>
+    </template>
+  </div>
+</template>
+
+<script>
+import auth from '../auth'
+
+export default {
+  data () {
+    return {
+      loggedIn: auth.loggedIn()
+    }
+  },
+  created () {
+    auth.onChange = loggedIn => {
+      this.loggedIn = loggedIn
+    }
+  }
+}
+</script>

Diff for: examples/auth-flow/components/Dashboard.vue

@@ -0,0 +1,6 @@
+<template>
+  <div>
+    <h2>Dashboard</h2>
+    <p>Yay you made it!</p>
+  </div>
+</template>

Diff for: examples/auth-flow/components/Login.vue

@@ -0,0 +1,39 @@
+<template>
+  <div>
+    <h2>Login</h2>
+    <p v-if="$route.query.redirect">
+      You need to login first.
+    </p>
+    <form @submit.prevent="login">
+      <label><input v-model="email" placeholder="email"></label>
+      <label><input v-model="pass" placeholder="password" type="password"></label> (hint: password1)<br>
+      <button type="submit">login</button>
+      <p v-if="error" style="color:red">Bad login information</p>
+    </form>
+  </div>
+</template>
+
+<script>
+import auth from '../auth'
+
+export default {
+  data () {
+    return {
+      email: '[email protected]',
+      pass: '',
+      error: false
+    }
+  },
+  methods: {
+    login () {
+      auth.login(this.email, this.pass, loggedIn => {
+        if (!loggedIn) {
+          this.error = true
+        } else {
+          this.$router.replace(this.$route.query.redirect || '/')
+        }
+      })
+    }
+  }
+}
+</script>

Diff for: examples/auth-flow/index.html

@@ -0,0 +1,5 @@
+<!DOCTYPE html>
+<a href="/">Examples index</a>
+<div id="app"></div>
+<script src="/__build__/shared.js"></script>
+<script src="/__build__/auth-flow.js"></script>