構建Vue項目-身份驗證

通常，在開始使用新框架或新語言工作時，我會嘗試查找儘可能多的最佳實踐，而我更喜歡從一個易於理解，維護和升級的良好結構開始。 在這篇文章中，我將嘗試解釋自己的想法，並將過去幾年中獲得的所有知識與最新，最好的Web開發實踐結合起來。

我們將共同構建一個簡單的項目，該項目處理身份驗證並準備在構建應用程序其餘部分時要使用的基本腳手架。

我們將使用：

• Vue.js 2.5 和 Vue-CLI
• Vuex 3.0
• Axios 0.18
• Vue Router3.0

這是最終項目結構。 假設您已經閱讀了Vue，Vuex和Vue Router文檔，並且瞭解了其中的基礎知識。

└── src
    ├── App.vue
    ├── assets
    │   └── logo.png
    ├── components
    │   └── HelloWorld.vue
    ├── main.js
    ├── router.js
    ├── services
    │   ├── api.service.js
    │   ├── storage.service.js
    │   └── user.service.js
    ├── store
    │   ├── auth.module.js
    │   └── index.js
    └── views
        ├── About.vue
        ├── Home.vue
        └── LoginView.vue

受保護的頁面

首先，讓我們保護某些URL，使其僅登錄用戶才能訪問。 爲此，我們需要編輯router.js。 我採用的方法是所有頁面都是私有的，除了我們直接標記爲公共的頁面之外。將可見性默認設置爲私有，並通過顯式地公開要公開的路由。

在下面的代碼中，我們會使用Vue Router中的meta參數。 登錄授權之後，將重定向到他們登錄之前嘗試訪問的頁面。 對於登錄視圖，它僅在用戶未登錄時纔可訪問，因此我們添加了一個名爲onlyWhenLoggedOut的元字段，設置爲true。

import Vue from 'vue'
import Router from 'vue-router'
import Home from './views/Home.vue'
import LoginView from './views/LoginView.vue'
import { TokenService } from './services/storage.service'

Vue.use(Router)

const router =  new Router({
  mode: 'history',
  base: process.env.BASE_URL,
  routes: [
    {
      path: '/',
      name: 'home',
      component: Home
    },
    {
      path: '/login',
      name: 'login',
      component: LoginView,
      meta: {
        public: true,  // 未登錄時，允許訪問
        onlyWhenLoggedOut: true
      }
    },
    {
      path: '/about',
      name: 'about',
      // 路由級別代碼分割
      // 這個會生成一個單獨的chunk (about.[hash].js)
      // 當路由訪問時候，進行懶加載
      component: () => import(/* webpackChunkName: "about" */ './views/About.vue')
    },
  ]
})

router.beforeEach((to, from, next) => {
  const isPublic = to.matched.some(record => record.meta.public)
  const onlyWhenLoggedOut = to.matched.some(record => record.meta.onlyWhenLoggedOut)
  const loggedIn = !!TokenService.getToken();

  if (!isPublic && !loggedIn) {
    return next({
      path:'/login',
      query: {redirect: to.fullPath}  // 存儲訪問路徑，登陸後重定向使用
    });
  }

  // 不允許用戶訪問登錄註冊頁面，如果未登錄
  if (loggedIn && onlyWhenLoggedOut) {
    return next('/')
  }

  next();
})


export default router;

您會注意到，我們導入了TokenService，該服務會返回token。 TokenService在services / storage.service.js文件中，它負責封裝和處理localStorage本地存儲，訪問，檢索令牌的邏輯。

這樣，我們就可以安全地從localStorage遷移到Cookie，而不必擔心會破壞其他直接訪問本地存儲的服務或組件。 這是一個很好的做法，可以避免將來出現麻煩。 storage.service.js中的代碼如下所示：

const TOKEN_KEY = 'access_token'
const REFRESH_TOKEN_KEY = 'refresh_token'

/**
 * 管理訪問令牌存儲和獲取，從本地存儲中
 *
 * 當前存儲實現是使用localStorage. Local Storage可以被這個實例一直訪問到
**/
const TokenService = {
    getToken() {
        return localStorage.getItem(TOKEN_KEY)
    },

    saveToken(accessToken) {
        localStorage.setItem(TOKEN_KEY, accessToken)
    },

    removeToken() {
        localStorage.removeItem(TOKEN_KEY)
    },

    getRefreshToken() {
        return localStorage.getItem(REFRESH_TOKEN_KEY)
    },

    saveRefreshToken(refreshToken) {
        localStorage.setItem(REFRESH_TOKEN_KEY, refreshToken)
    },

    removeRefreshToken() {
        localStorage.removeItem(REFRESH_TOKEN_KEY)
    }

}

export { TokenService }

閱讀全文：zhaima.tech - 構建Vue項目-身份驗證