[分享]学vue鉴权

鉴权（Authentication）是指在系统中验证一个实体的身份。在Vue开发中，鉴权是一个重要的话题。因为鉴权是Vue应用程序安全性的基石。Vue的鉴权可以通过多种方式实现，包括基于路由的认证、T...

鉴权（Authentication）是指在系统中验证一个实体的身份。在Vue开发中，鉴权是一个重要的话题。因为鉴权是Vue应用程序安全性的基石。Vue的鉴权可以通过多种方式实现，包括基于路由的认证、Token验证等。

一、基于路由的认证

import Vue from 'vue'
import Router from 'vue-router'
import Home from '../views/Home.vue'
import Admin from '../views/Admin.vue'

Vue.use(Router)

const router = new Router({
  routes: [
    {
      path: '/',
      name: 'home',
      component: Home,
      meta: { requiresAuth: true }
    },
    {
      path: '/admin',
      name: 'admin',
      component: Admin,
      meta: { requiresAuth: true, isAdmin: true }
    }
  ]
})

router.beforeEach((to, from, next) => {
  if (to.matched.some(record => record.meta.requiresAuth)) {
    const isAuthenticated = false // 判断用户是否已经通过身份验证
    if (isAuthenticated) {
      next()
    } else {
      next('/login')
    }
  } else {
    next()
  }
})

export default router 

使用meta属性可以为路由添加自定义字段，这些字段可以在导航守卫中进行检查。在上述代码中，我们设置一个requiresAuth标记来指示该路由需要进行身份验证。如果用户没有通过身份验证，则应该被重定向到登录页面。

二、Token验证

import axios from 'axios'

const http = axios.create({
  baseURL: 'http://localhost:3000/api',
  timeout: 1000
})

export default {
  auth: {
    login(email, password) {
      return http.post('/auth/login', { email: email, password: password })
        .then(response => {
          const token = response.data.token
          localStorage.setItem('token', token)
          http.defaults.headers.common['Authorization'] = 'Bearer ' + token
          return response.data
        })
    },
    
    logout() {
      localStorage.removeItem('token')
      delete http.defaults.headers.common['Authorization']
      return Promise.resolve()
    },

    isAuthenticated() {
      const token = localStorage.getItem('token')
      return !!token
    }
  }
} 

在上述代码中，我们创建了一个HTTP实例，并为该实例添加了Authorization头部，该头部用于包含Token信息。通过isAuthenticated方法，我们可以验证Token是否存在。

鉴权在Vue应用程序中起着重要的作用，并且可以通过多种方式实现。如果您正在开发一个Vue应用程序并打算引入鉴权功能，请务必了解不同的鉴权方法，并根据您的需求选择最适合您应用的方法。