cookie缓存时间设置，401设置，设置不同模式启动不同服务

Author: 2017coding

.env.development

@@ -2,6 +2,7 @@
 ENV = 'development'
 
 VUE_APP_BASE_API = ''
+VUE_APP_TYPE = 'service'
 
 # vue-cli uses the VUE_CLI_BABEL_TRANSPILE_MODULES environment variable,
 # to control whether the babel-plugin-dynamic-import-node plugin is enabled.

.env.localhost

@@ -0,0 +1,15 @@
+# just a flag
+ENV = 'development'
+
+VUE_APP_BASE_API = ''
+
+VUE_APP_TYPE = 'localhost'
+
+# vue-cli uses the VUE_CLI_BABEL_TRANSPILE_MODULES environment variable,
+# to control whether the babel-plugin-dynamic-import-node plugin is enabled.
+# It only does one thing by converting all import() to require().
+# This configuration can significantly increase the speed of hot updates,
+# when you have a large number of pages.
+# Detail:  https://github.com/vuejs/vue-cli/blob/dev/packages/@vue/babel-preset-app/index.js
+
+VUE_CLI_BABEL_TRANSPILE_MODULES = true

package.json

@@ -5,7 +5,7 @@
   "private": true,
   "scripts": {
     "dev": "vue-cli-service serve",
-    "dev:prod": "vue-cli-service serve --mode production",
+    "localhost": "vue-cli-service serve --mode localhost",
     "build": "vue-cli-service build",
     "lint": "eslint --fix --ext .js,.vue src"
   },

src/App.vue

@@ -5,8 +5,14 @@
 </template>
 
 <script>
+import { mapGetters } from 'vuex'
 export default {
   name: 'App',
+  computed: {
+    ...mapGetters([
+      'userInfo'
+    ])
+  },
   watch: {
     $route (val) {
       this.invalidRoute(val)
@@ -20,6 +26,14 @@ export default {
         this.$router.push('/404')
         return
       }
+      // 如果用户没有登录，进入这些页面将重定向到401页面
+      if (!this.userInfo) {
+        const inaccessibleList = ['/write']
+        if (inaccessibleList.includes(val.path)) {
+          this.$router.push('/401')
+          return
+        }
+      }
     }
   }
 }

src/store/modules/user.js

@@ -26,8 +26,8 @@ const user = {
     setToken ({ commit }, data) {
       return new Promise((resolve, reject) => {
         commit('SET_TOKEN', data)
-        // 将数据存到缓存
-        _setCookie('token', data)
+        // 设置cookie过期时间为30天
+        _setCookie('token', data, { expires: 30 })
         resolve()
       })
     },

src/views/errorPage/401.vue

@@ -11,8 +11,8 @@
           <li class="link-type">
             <router-link to="/">回首页</router-link>
           </li>
-          <li class="link-type"><a href="https://www.taobao.com/">逛逛淘宝</a></li>
-          <li class="link-type"><a href="https://github.com/">刷刷github</a></li>
+          <li class="link-type"><a href="https://www.taobao.com/" target="_blank">逛逛淘宝</a></li>
+          <li class="link-type"><a href="https://github.com/2017coding/BBS" target="_blank">刷刷github</a></li>
           <li><a href="#" @click.prevent="dialogVisible=true">点我看图</a></li>
         </ul>
       </el-col>

src/views/layout/components/UserTool.vue

@@ -285,7 +285,8 @@ export default {
             .then(res => {
               if (res.success) {
                 if (type === 'login') {
-                  _setCookie('token', res.token)
+                  // 设置cookie过期时间为30天
+                  _setCookie('token', res.token, { expires: 30 })
                   // 设置cookie
                   this.$store.dispatch('user/setToken', res.token)
                   // 设置

vue.config.js

@@ -3,6 +3,16 @@ const path = require('path')
 function resolve (dir) {
   return path.join(__dirname, dir)
 }
+function getProxy (path, type) {
+  if (path === '/api') {
+    switch (type) {
+      case 'localhost':
+        return 'http://localhost:1313'
+      case 'service':
+        return 'https://www.lyh.red'
+    }
+  }
+}
 module.exports = {
   publicPath: './',
   outputDir: 'bbs',
@@ -18,8 +28,7 @@ module.exports = {
     },
     proxy: {
       '/api': {
-        // target: 'http://localhost:1313',
-        target: 'https://www.lyh.red',
+        target: getProxy('/api', process.env.VUE_APP_TYPE),
         pathRewrite: {
           '^/api': '/api'
         }