【原创】记录一次Vue实现Token验证，前后端实现完整流程时光大魔王

2024-07-17 18:46| 来源: 网络整理| 查看: 265

你好，本文原创，转载请说明！

作者：时光

个人网站 (timebk.cn) | 我的Github | 我的Gitee

前言：在Vue项目中，我们需要实现验证用户是否登录和token是否过期，网上的教程层出不穷，有的是Copy，有的是晦涩难懂，本文将以最通俗易懂的方式和具体代码呈现给您！

前端运用：vue2、vue-router、Axios 后端运用：Node.js、express-generator、jsonwebtoken(token生成) 数据库：MongoDB 前端方面

当我们需要实现验证功能时，首先应该知道我们需要用到 vue-router的导航守卫和 Axios的请求拦截器，前者主要实现验证用户是否登录，而后者主要实现验证token是否过期。

将token存放到localStorage

通过封装好的Axios方法获取到后端返回的 token 并存入 localStorage （后端生成token方法在后端方面里）：

this.$network({ url: `adminLogin?account=${form.account}&password=${form.password}`, }).then((res) => { // 判断请求是否正常请自行发挥 if (res.code == 200) {// 如果正常 //将后端返回的token存入localStorage localStorage.setItem("token", res.token); } }) vue-router的导航守卫

注：这里我们使用的是 router.beforeEach

目的：通过导航守卫进行本地是否登录判断，判断当前页面是否是登录注册页 (或其它需要排除的页面)，如果是，则进行是否已登录验证；如果不是，则进行是否未登录验证：

// 注：这里我们使用的是 `router.beforeEach` if (to.fullPath == '/login') {// 排除页面 if (localStorage.getItem('token') != null) { console.log('您已登录，是否访问首页？'); } } else if (localStorage.getItem('token') == null) { // 如果访问的是其它路由页面而且token不存在，即为未登录 localStorage.clear();// 清除一次 localStorage console.log('您未登录，是否访问登录页？'); return } Axios的拦截器

目的：通过axios的请求拦截器 interceptors 进行请求前、请求后的事件。

请求前 interceptors.request

首先需要在请求前 interceptors.request 里将 token 放到 headers中的Authorization中，以便每次发起网络请求时携带：

// 请求前 interceptors.request config.headers.Authorization = localStorage.getItem("token"); `请求后 interceptors.response

然后在请求后 interceptors.response 里进行token是否过期验证

注：这里需要后端配合返回是特定的标识，具体方法请看后端方面，我这里是返回的 loginStatus 为 false ，

当然首先我们还是需要判断一下当前页面是否是登录注册页 (或其它需要排除的页面)，如果不是，则验证token是否过期

// 请求后 interceptors.response if (window.location.pathname != '/login') {// 排除页面 if (res.data.loginStatus == false) {// 如果token已过期 localStorage.clear();// 清除一次 localStorage console.log('登录状态已失效，是否访问登录页？'); } }

到目前为止，前端方面就基本结束了，当然类如已登录跳转首页、未登录和token过期后跳转登录页的交互请自行发挥！

后端方面

这里我用的是 Node.js + express-generator + MongoDB + jsonwebtoken(token生成插件)实现。

获取前端传过来的token let token = req.headers.authorization; jsonwebtoken token生成和验证

这是一个生成token的插件，官方文档：https://www.npmjs.com/package/jsonwebtoken

// 安装 npm i jsonwebtoken // 安装好后进行导入 const jwt = require('jsonwebtoken'); // token生成

我们主要用它的两个方法：jwt.sign() 和 jwt.verify()

payload 传入参数，从请求中接收，对象形式

token 传入需要验证的token值，一般从Authorization中接收，字符串形式

secretOrPrivateKey 秘密或公钥，生成方法和验证方法这里应该一样

[options, callback] 选项和回调，sign()的options一般用expiresIn:callback(过期事件，单位为秒)；verify()的options一般为err(token已过期)，

生成token jwt.sign(payload, secretOrPrivateKey, [options, callback]) // time 过期时间，单位为秒s jwt.sign({account: account,password:password},'userLogin',{expiresIn :time}); 验证token jwt.verify(token, secretOrPublicKey, [options, callback]) jwt.verify(token, 'userLogin', (err, data) => { if (err) {// 过期token console.log('已过期'); } else {// 有效token console.log('未过期'); } }) 我的写法 // token验证，生成时和请求验证时的都可以调用！返回token状态，false为已过期 function tokenVerify(token) { let status; jwt.verify(token, 'userLogin', (err, data) => { if (err) {// 过期token status = false } else {// 有效token status = true } }) return status } // token生成，只用于登录时调用！通过调用token验证函数，判断token是否过期，若未过期，则返回true，前端token值不变；若过期，则重新生成，前端重新保存token function tokenGenerate(token, account, password, time) { let status = tokenVerify(token); if (status) {// 若token未过期 token = true; } else {// 若token已过期 token = jwt.sign({ account: account, password: password }, 'userLogin', { expiresIn: time }); } return token } 结语

就这样，前后端合作实现了验证用户是否登录和token是否过期，预留发挥空间大，可根据需求增加交互和验证！

【本文地址】

公司简介

联系我们

今日新闻

推荐新闻

专题文章

【原创】记录一次Vue实现Token验证，前后端实现完整流程 时光大魔王

【原创】记录一次Vue实现Token验证，前后端实现完整流程时光大魔王