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

博主：时光小灶
发布时间：2022 年 10 月 03 日
2935 次浏览
10 条评论
4077字数
分类：代码学习

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

作者：时光

[个人网站 (timebk.cn)](https://timebk.cn/) | [我的Github](https://github.com/time-demon) | [我的Gitee](https://gitee.com/time-demon)

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

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

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

## 将token存放到localStorage

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

```js
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`

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

```js
// 注：这里我们使用的是 `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中` ，以便 `每次发起网络请求时携带` ：

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

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

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

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

```js
// 请求后 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

```js
let token = req.headers.authorization;
```
## jsonwebtoken token生成和验证

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

```js
// 安装
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])

```js
// time 过期时间，单位为秒s
jwt.sign({account: account,password:password},'userLogin',{expiresIn :time});
```
### 验证token jwt.verify(token, secretOrPublicKey, [options, callback])

```js
jwt.verify(token, 'userLogin', (err, data) => {
    if (err) {// 过期token
        console.log('已过期');
    } else {// 有效token
        console.log('未过期');
    }
})
```
### 我的写法

```js
// 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是否过期，预留发挥空间大，可根据需求增加交互和验证！

最后修改：2022 年 10 月 03 日

分享不易，请老板打赏。

10 条评论

1
August 9th, 2023 at 08:26 pm

555

回复
1 1
August 9th, 2023 at 04:15 pm

1

回复
1. 1 72
  August 9th, 2023 at 04:17 pm
  
  @1
  
  1
  
  回复
  1. 1
    August 9th, 2023 at 06:57 pm
    
    @1
    
    1
    
    回复
  2. 1
    August 9th, 2023 at 06:57 pm
    
    @1
    
    1
    
    回复
  3. 1
    August 9th, 2023 at 06:57 pm
    
    @1
    
    1
    
    回复
  4. 1 1
    August 9th, 2023 at 05:55 pm
    
    @1
    
    555
    
    回复
  5. ubaTaeCJ 2
    August 9th, 2023 at 04:42 pm
    
    @1
    
    1
    
    回复
  6. ubaTaeCJ 2
    August 9th, 2023 at 04:42 pm
    
    @1
    
    1
    
    回复
1 1
August 9th, 2023 at 04:15 pm

1

回复

发表评论取消回复

评论 *

私密评论

名称 *

🎲

邮箱 *

地址

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

时光小灶 • 2022 年 10 月 03 日

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

作者：时光

[个人网站 (timebk.cn)](https://timebk.cn/) | [我的Github](https://github.com/time-demon) | [我的Gitee](https://gitee.com/time-demon)

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

## 将token存放到localStorage

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

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

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

### 请求前 interceptors.request

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

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

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

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

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

# 后端方面

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

## 获取前端传过来的token

```js
let token = req.headers.authorization;
```
## jsonwebtoken token生成和验证

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

```js
// 安装
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])

```js
// time 过期时间，单位为秒s
jwt.sign({account: account,password:password},'userLogin',{expiresIn :time});
```
### 验证token jwt.verify(token, secretOrPublicKey, [options, callback])

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

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

10 条评论

发表评论取消回复

超星/学习通网页版破解人脸识别代码

【原创】最新29刷网课平台系统TOC模板源码+带教程更新1.1.0

PC游戏实时自动翻译软件【团子翻译器】

【原创】【使用文档】29刷网课平台系统TOC模板

我的个人项目地址&开源链接&技术博客地址

一些有趣实用的静态图片和动态图片

比较三个数的大小并排序 JavaScript

超星/学习通网页版破解人脸识别代码

【原创】Vue Router 之 router.push 和 router.resolve 页面跳转简单记录

Github Hosts Windows&Mac 时光小灶

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

10 条评论

发表评论 取消回复

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

发表评论取消回复