feat(plugins):增加请求拦截器和dayjs 两个plugins

api/article.js

-import request from '@/utils/request'
+import { request } from '@/plugins/request'
 
 //  获取公共文章列表
 export const getArticles =  params => {
@@ -8,3 +8,12 @@ export const getArticles =  params => {
     params
   })
 }
+
+//  获取关注文章列表
+export const getFeedArticles =  params => {
+  return request({
+    method: 'GET',
+    url: '/api/articles/feed',
+    params
+  })
+}
\ No newline at end of file

api/tag.js

+import { request } from '@/plugins/request'
+
+//  获取tag
+export const getTags =  () => {
+  return request({
+    method: 'GET',
+    url: '/api/tags'
+  })
+}
\ No newline at end of file

api/user.js

-import request from '@/utils/request'
+import { request } from '@/plugins/request'
 
 //  login
 export const login =  data => {

nuxt.config.js

@@ -53,5 +53,9 @@ module.exports = {
       //   component: resolve(__dirname, 'pages/404.vue')
       // })
     }
-  }
+  },
+  plugins: [
+    '~/plugins/request',
+    '~/plugins/dayjs'
+  ]
 }
\ No newline at end of file

package.json

@@ -12,6 +12,7 @@
   "dependencies": {
     "axios": "^0.21.1",
     "cookieparser": "^0.1.0",
+    "dayjs": "^1.10.4",
     "js-cookie": "^2.2.1",
     "nuxt": "^2.15.4"
   }

pages/home/index.vue

@@ -14,11 +14,57 @@
         <div class="col-md-9">
           <div class="feed-toggle">
             <ul class="nav nav-pills outline-active">
-              <li class="nav-item">
-                <a class="nav-link disabled" href="">Your Feed</a>
+              <li v-if="user" class="nav-item">
+                <nuxt-link 
+                  class="nav-link"
+                  :class="{
+                    active: tab === 'your_feed'
+                  }"
+                  exact
+                  :to="{
+                    name: 'home',
+                    query:{
+                      tab:'your_feed'
+                    }
+                  }"
+                >
+                  Your Feed
+                </nuxt-link >
               </li>
               <li class="nav-item">
-                <a class="nav-link active" href="">Global Feed</a>
+                <nuxt-link 
+                  class="nav-link"
+                  :class="{
+                    active: tab === 'global_feed'
+                  }"
+                  exact
+                  :to="{
+                    name: 'home',
+                    query:{
+                      tab:'global_feed'
+                    }
+                  }"
+                >
+                  Global Feed
+                </nuxt-link>
+              </li>
+              <li class="nav-item" v-if="tag">
+                <nuxt-link 
+                  class="nav-link"
+                  :class="{
+                    active: tab === 'tag'
+                  }"
+                  exact
+                  :to="{
+                    name: 'home',
+                    query:{
+                      tab: 'tag',
+                      tag
+                    }
+                  }"
+                >
+                  #{{tag}}
+                </nuxt-link>
               </li>
             </ul>
           </div>
@@ -48,7 +94,7 @@
                   }">
                   {{ article.author.name }}
                 </nuxt-link>
-                <span class="date">{{ article.createdAt }}</span>
+                <span class="date">{{ article.createdAt | date('MMM DD YYYY') }}</span>
               </div>
               <button 
                 class="btn btn-outline-primary btn-sm pull-xs-right" 
@@ -88,7 +134,9 @@
                   :to="{
                     name:'home',
                     query: {
-                      page: item
+                      page: item,
+                      tag: $route.query.tag,
+                      tab
                     }
                   }"
                 >
@@ -105,14 +153,19 @@
             <p>Popular Tags</p>
 
             <div class="tag-list">
-              <a href="" class="tag-pill tag-default">programming</a>
-              <a href="" class="tag-pill tag-default">javascript</a>
-              <a href="" class="tag-pill tag-default">emberjs</a>
-              <a href="" class="tag-pill tag-default">angularjs</a>
-              <a href="" class="tag-pill tag-default">react</a>
-              <a href="" class="tag-pill tag-default">mean</a>
-              <a href="" class="tag-pill tag-default">node</a>
-              <a href="" class="tag-pill tag-default">rails</a>
+              <nuxt-link 
+                :to="{
+                  name:'home',
+                  query:{
+                    tag,
+                    tab: 'tag'
+                  }
+                }" 
+                class="tag-pill tag-default" 
+                v-for="(tag,index) in tags" :key="index"
+              >
+                {{tag}}
+              </nuxt-link>
             </div>
           </div>
         </div>
@@ -123,27 +176,46 @@
   </div>
 </template>
 <script>
-import { getArticles } from '@/api/article'
+import { getArticles, getFeedArticles } from '@/api/article'
+import { getTags } from '@/api/tag'
+import { mapState } from 'vuex'
 
 export default {
   name:'Home',
-  watchQuery:['page'],
+  watchQuery:['page', 'tag', 'tab'],
   async asyncData({isDev, route, store, env, params, query, req, res, redirect, error}) {
+
+    // 页面数据
     const page = Number.parseInt(query.page || 1)
     const limit = 10
-    const {data} = await getArticles({
+    const { tag } = query
+    const tab = query.tab || 'global_feed'
+    const loadArticles = store.state.user && tab === 'your_feed' ? getFeedArticles : getArticles
+
+    const [articlesRes , tagRes] = await Promise.all([
+      loadArticles({
         limit,
-      offset:(page-1) * limit
-    })
-    // console.log(data.articles)
+        offset:(page-1) * limit,
+        tag
+      }),
+      getTags()
+    ])
+    
+    const { articles, articlesCount } = articlesRes.data
+    const { tags } = tagRes.data
+    // 标签列表
     return {
-      articles: data.articles,
-      articlesCount: data.articlesCount,
+      articles,
+      articlesCount,
+      tags: tags.filter(item=>item.replace(/\p{C}+/u, "")),
       limit,
-      page
+      page,
+      tag,
+      tab
     }    
   },
   computed:{
+    ...mapState(['user']),
     totalPage(){
       return Math.ceil(this.articlesCount / this.limit)
     }

plugins/dayjs.js

+import Vue from 'vue'
+import dayjs from 'dayjs'
+
+Vue.filter('date', (value, format = 'YYYY-MM-DD')=>{
+  return dayjs(value).format(format)
+})
\ No newline at end of file

plugins/request.js

+import axios from 'axios'
+
+
+export const request = axios.create({
+  baseURL:'https://conduit.productionready.io'
+})
+
+// 通过插件机制获取到上下文对象
+export default ({ store }) =>{
+  // 请求拦截器
+  request.interceptors.request.use(function(config){
+    const {user} = store.state
+    if(user && user.token){
+      config.headers.Authorization = `Token ${user.token}`
+    }
+    return config
+  }, function(error){
+    // 如果请求失败（此时请求还没发出去）就会进入这里
+    return Promise.reject(error)
+  })
+  // 响应拦截器
+}

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

@@ -2812,6 +2812,11 @@ cyclist@^1.0.1:
   resolved "https://registry.yarnpkg.com/cyclist/-/cyclist-1.0.1.tgz#596e9698fd0c80e12038c2b82d6eb1b35b6224d9"
   integrity sha1-WW6WmP0MgOEgOMK4LW6xs1tiJNk=
 
+dayjs@^1.10.4:
+  version "1.10.4"
+  resolved "https://registry.yarnpkg.com/dayjs/-/dayjs-1.10.4.tgz#8e544a9b8683f61783f570980a8a80eaf54ab1e2"
+  integrity sha512-RI/Hh4kqRc1UKLOAf/T5zdMMX5DQIlDxwUe3wSyMMnEbGunnpENCdbUgM+dW7kXidZqCttBrmw7BhN4TMddkCw==
+
 de-indent@^1.0.2:
   version "1.0.2"
   resolved "https://registry.yarnpkg.com/de-indent/-/de-indent-1.0.2.tgz#b2038e846dc33baa5796128d0804b455b8c1e21d"