基于vue 实现token验证的实例代码

下面我将详细讲解基于vue实现token验证的实例代码的完整攻略。

步骤一：创建Vue项目

首先，我们需要创建一个Vue项目，这里我们使用Vue-CLI命令行工具来快速生成一个Vue项目。打开终端，运行以下命令：

# 全局安装Vue-CLI
npm install -g @vue/cli

# 创建一个新的Vue项目
vue create vue-token-auth-example

执行完以上命令后，会让你选择一些配置选项，可以选择默认选项或手动配置。

步骤二：安装依赖包

在创建完Vue项目后，我们需要安装一些必要的依赖包。打开终端，切换到项目根目录，执行以下命令：

npm install axios vue-router vuex --save

其中，Axios是一个基于 Promise 的 HTTP 库，可以用来请求后端接口数据；Vue-Router 是 Vue.js 官方的路由管理器，用于页面之间的切换和跳转；Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式，主要用于组件之间的通信。

步骤三：实现token验证

1. 创建登录页面

在 Vue 项目中，可以通过 Vue-Router 来实现页面之间的跳转。我们可以在 src/views 目录下创建一个 Login.vue 文件，编写登录页面的代码，下面是一个简单的示例：

<template>
  <div class="login">
    <h2>登录</h2>
    <input type="text" v-model="username" placeholder="请输入用户名">
    <input type="password" v-model="password" placeholder="请输入密码">
    <button @click="login()">登录</button>
  </div>
</template>

<script>
  export default {
    data() {
      return {
        username: '',
        password: '',
      }
    },
    methods: {
      login() {
        // 在这里调用登录接口
      },
    },
  }
</script>

在上面的示例中，我们创建了一个登录页面，并使用了v-model指令来双向绑定用户输入的用户名和密码。登录按钮的单击事件会调用 login 方法，接下来我们就来实现这个方法。

2. 实现登录接口

我们可以使用 Axios 发送 POST 请求来调用后端的登录接口，实现用户登录的功能。在 src/services 目录下创建一个 auth.js 文件，用于管理所有与认证相关的 API 请求，下面是一个简单的示例：

import axios from 'axios'

const authService = axios.create({
  baseURL: process.env.VUE_APP_BASE_API,
})

authService.interceptors.request.use(config => {
  const token = localStorage.getItem('token')
  if (token) {
    config.headers.Authorization = `Bearer ${token}`
  }
  return config
})

export function login(username, password) {
  return authService.post('/login', {
    username,
    password,
  })
}

export function getProfile() {
  return authService.get('/profile')
}

在上面的代码中，我们使用了 Axios 的拦截器，在每个请求中添加了 Authorization 请求头，它的值为我们从本地存储中获取的 token。接着，我们定义了一个登录方法来调用后端的登录接口，该接口会返回一个 token，我们可以将它保存在本地存储中。最后，我们定义了一个获取用户信息的方法，该方法会在每个请求中附带 token。

3. 用户登录

接下来我们回到刚才创建的 Login.vue 文件中，实现用户登录的逻辑。调用 auth.js文件中的 login() 方法来向后端发送登录请求，并将返回的 token 保存到本地存储中：

<script>
import { login } from '@/services/auth'

export default {
  data() {
    return {
      username: '',
      password: '',
    }
  },
  methods: {
    async login() {
      try {
        const response = await login(this.username, this.password)
        localStorage.setItem('token', response.data.token)
        this.$router.push('/profile')
      } catch (error) {
        console.log('登录失败：', error.response.data)
      }
    },
  },
}
</script>

4. 路由拦截

为了保护某些页面只能由认证用户访问，在 Vue-Router 中，可以通过路由导航守卫来进行路由拦截。在 src/router/index.js 文件中，我们添加一个 beforeEach 导航守卫：

import Vue from 'vue'
import Router from 'vue-router'
import Profile from '@/views/Profile.vue'

Vue.use(Router)

const router = new Router({
  routes: [
    {
      path: '/profile',
      name: 'Profile',
      component: Profile,
    },
  ],
})

router.beforeEach((to, from, next) => {
  const token = localStorage.getItem('token')
  if (to.path === '/login') {
    if (token) {
      next('/profile')
    } else {
      next()
    }
  } else {
    if (!token) {
      next('/login')
    } else {
      next()
    }
  }
})

export default router

在上面的代码中，我们定义了一个导航守卫，它会在每次路由切换时执行。在每个路由前，判断用户是否已登录，如果已经登录，就允许用户访问目标页面，否则就重定向到登录页面 (/login)。