构建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项目-身份验证