feat(登录):保存持久化登录

api/user.js

+import request from '@/utils/request'
+
+//  login
+export const login =  data => {
+  return request({
+    method: 'POST',
+    url: '/api/users/login',
+    data
+  })
+}
+
+
+//  register
+export const register =  data => {
+  return request({
+    method: 'POST',
+    url: '/api/users',
+    data
+  })
+}
\ No newline at end of file

nuxt.config.js

 module.exports = {
   router:{
+    linkActiveClass: 'active',
     extendRoutes(routes, resolve) {
       // 清空路由
       routes.splice(0)

package.json

@@ -10,6 +10,9 @@
   "author": "",
   "license": "ISC",
   "dependencies": {
+    "axios": "^0.21.1",
+    "cookieparser": "^0.1.0",
+    "js-cookie": "^2.2.1",
     "nuxt": "^2.15.4"
   }
 }

pages/layout/index.vue

@@ -7,7 +7,7 @@
         <ul class="nav navbar-nav pull-xs-right">
           <li class="nav-item">
             <!-- Add "active" class when you're on that page" -->
-            <nuxt-link class="nav-link active" to="/">Home</nuxt-link>
+            <nuxt-link class="nav-link" to="/" exact>Home</nuxt-link>
           </li>
           <li class="nav-item">
             <nuxt-link class="nav-link" to="/editor">
@@ -25,6 +25,11 @@
           <li class="nav-item">
             <nuxt-link class="nav-link" to="/register">Sign up</nuxt-link>
           </li>
+          <li class="nav-item">
+            <nuxt-link class="nav-link" to="/profile/langrenaq">
+              <img class="user-pic" />langrenaq
+            </nuxt-link>
+          </li>
         </ul>
       </div>
     </nav>

pages/login/index.vue

@@ -16,20 +16,22 @@
           </p>
 
           <ul class="error-messages">
-            <li>That email is already taken</li>
+            <template v-for="(messages, field) in errors">
+              <li v-for="(message, index) in messages" :key="index">{{ field }}{{ message}}</li>
+            </template>
           </ul>
 
-          <form>
+          <form @submit.prevent="onSubmit">
             <fieldset class="form-group" v-if="!isLogin">
-              <input class="form-control form-control-lg" type="text" placeholder="Your Name">
+              <input class="form-control form-control-lg" v-model="user.username" type="text" placeholder="Your Name" required>
             </fieldset>
             <fieldset class="form-group">
-              <input class="form-control form-control-lg" type="text" placeholder="Email">
+              <input class="form-control form-control-lg" v-model="user.email" type="email" placeholder="Email" required>
             </fieldset>
             <fieldset class="form-group">
-              <input class="form-control form-control-lg" type="password" placeholder="Password">
+              <input class="form-control form-control-lg" v-model="user.password" type="password" placeholder="Password" required minlength="8">
             </fieldset>
-            <button class="btn btn-lg btn-primary pull-xs-right">
+            <button class="btn btn-lg btn-primary pull-xs-right" type="submit">
               {{
                 isLogin? 'Sign in' : 'Sign up'
               }}
@@ -42,12 +44,50 @@
   </div>
 </template>
 <script>
+import { login, register } from '@/api/user'
+
+const Cookie  = process.client ? require('js-cookie'): undefined
+
 export default {
   name:'Login',
   computed:{
     isLogin(){
       return this.$route.name === 'login'
     }
+  },
+  methods:{
+    async onSubmit(){
+      try {
+        const { data } = this.isLogin ? 
+        await login({
+          user:this.user
+        }):
+        await register({
+          user:this.user
+        })
+        this.$store.commit('setUser', data.user)
+
+        Cookie.set('user', data.user)
+
+        this.$router.push('/')
+      } catch (error) {
+        console.log(error)
+        this.errors = error.response.data.errors
+      }
+      
+    }
+  },
+  data(){
+    return {
+      user:{
+        username:'',
+        email:'',
+        password:''
+      },
+      errors:{
+
+      }
+    }
   }
 }
 </script>

store/index.js

+const cookieparser = process.server? require('cookieparser'): undefined
+
+export const state = () => ({
+  user: null
+})
+
+export const mutations = {
+  setUser(state, data) {
+    state.user = data
+  }
+}
+
+export const actions = {
+  nuxtServerInit ({ commit }, { req }) {
+    let user = null
+    if(req.headers.cookie){
+      const parsed = cookieparser.parse(req.headers.cookie)
+      try {
+        user = JSON.parse(parsed.user)
+      } catch (error) {
+      }
+    }
+    commit('setUser', user)
+  }
+}
\ No newline at end of file

utils/request.js

+import axios from 'axios'
+
+
+const request = axios.create({
+  baseURL:'https://conduit.productionready.io'
+})
+
+// 请求拦截器
+
+// 响应拦截器
+
+export default request
\ No newline at end of file

yarn.lock

@@ -1767,6 +1767,13 @@ autoprefixer@^9.6.1:
     postcss "^7.0.32"
     postcss-value-parser "^4.1.0"
 
+axios@^0.21.1:
+  version "0.21.1"
+  resolved "https://registry.yarnpkg.com/axios/-/axios-0.21.1.tgz#22563481962f4d6bde9a76d516ef0e5d3c09b2b8"
+  integrity sha512-dKQiRHxGD9PPRIUNIWvZhPTPpl1rf/OxTYKsqKUDjBwYylTvV7SjSHJb9ratfyzM6wCdLCOYLzs73qpg5c4iGA==
+  dependencies:
+    follow-redirects "^1.10.0"
+
 babel-loader@^8.2.2:
   version "8.2.2"
   resolved "https://registry.yarnpkg.com/babel-loader/-/babel-loader-8.2.2.tgz#9363ce84c10c9a40e6c753748e1441b60c8a0b81"
@@ -2481,6 +2488,11 @@ cookie@^0.3.1:
   resolved "https://registry.yarnpkg.com/cookie/-/cookie-0.3.1.tgz#e7e0a1f9ef43b4c8ba925c5c5a96e806d16873bb"
   integrity sha1-5+Ch+e9DtMi6klxcWpboBtFoc7s=
 
+cookieparser@^0.1.0:
+  version "0.1.0"
+  resolved "https://registry.yarnpkg.com/cookieparser/-/cookieparser-0.1.0.tgz#ea12cb1085c174f3167faeaf7985f79abe671d0e"
+  integrity sha1-6hLLEIXBdPMWf66veYX3mr5nHQ4=
+
 copy-concurrently@^1.0.0:
   version "1.0.5"
   resolved "https://registry.yarnpkg.com/copy-concurrently/-/copy-concurrently-1.0.5.tgz#92297398cae34937fcafd6ec8139c18051f0b5e0"
@@ -3437,6 +3449,11 @@ flush-write-stream@^1.0.0:
     inherits "^2.0.3"
     readable-stream "^2.3.6"
 
+follow-redirects@^1.10.0:
+  version "1.13.3"
+  resolved "https://registry.yarnpkg.com/follow-redirects/-/follow-redirects-1.13.3.tgz#e5598ad50174c1bc4e872301e82ac2cd97f90267"
+  integrity sha512-DUgl6+HDzB0iEptNQEXLx/KhTmDb8tZUHSeLqpnjpknR70H0nC2t9N73BK6fN4hOvJ84pKlIQVQ4k5FFlBedKA==
+
 for-in@^1.0.2:
   version "1.0.2"
   resolved "https://registry.yarnpkg.com/for-in/-/for-in-1.0.2.tgz#81068d295a8142ec0ac726c6e2200c30fb6d5e80"
@@ -4284,6 +4301,11 @@ jiti@^1.3.0, jiti@^1.6.4:
   resolved "https://registry.yarnpkg.com/jiti/-/jiti-1.9.1.tgz#d9e267fa050ddc52191f17d8af815d49a38ebafd"
   integrity sha512-AhYrAxJ/IW2257nHkJasUjtxHhmYIUEHEjsofJtGYsPWk8pTjqjbPFlJfOwfY+WX8YBiKHM1l0ViDC/mye2SWg==
 
+js-cookie@^2.2.1:
+  version "2.2.1"
+  resolved "https://registry.yarnpkg.com/js-cookie/-/js-cookie-2.2.1.tgz#69e106dc5d5806894562902aa5baec3744e9b2b8"
+  integrity sha512-HvdH2LzI/EAZcUwA8+0nKNtWHqS+ZmijLA30RwZA0bo7ToCckjK5MkGhjED9KoRcXO6BaGI3I9UIzSA1FKFPOQ==
+
 js-tokens@^4.0.0:
   version "4.0.0"
   resolved "https://registry.yarnpkg.com/js-tokens/-/js-tokens-4.0.0.tgz#19203fb59991df98e3a287050d4647cdeaf32499"