php vue jwt 实战,Vue路由之JWT身份认证的实现方法
一、JWT身份认证简介
JSON Web Token(JWT)是目前最流行的跨域身份验证解决方案,相较于session机制,服务器就不需要保存任何 session 数据了,也就是说,服务器变成无状态了,从而比较容易实现扩展。JWT 实际上是一个令牌(Token),服务器会将一些元数据、指定的secret进行签名并生成token,并返回给客户端,客户端得到这个服务器返回的令牌后,需要将其存储到 Cookie 或 localStorage 中,此后,每次与服务器通信都要带上这个令牌,可以把它放到 Cookie 中自动发送,但这样做不能跨域,所以更好的做法是将其放到 HTTP 请求头 Authorization 字段里面。
二、JWT的使用
① 安装并引入jsonwebtoken模块;
② 对元数据、secret密钥进行签名,并生成对应的token;
③ 对token进行校验是否过期;
const jwt = require("jsonwebtoken"); // 引入jwt
const secret = "this is a private key"; // 指定一个用于生成token的密钥字符串
const token = jwt.sign({ foo: 'bar' }, secret, { // 传入元数据和secret密钥,并指定过期时间生成token
expiresIn: 5, // 单独一个数字表示多少秒
// expiresIn: "10h", // 表示10小时后过期
// expiresIn: "2d" // 表示2天后过期
});
console.log(`token is ${token}`);
setTimeout(() => { // 5秒后对该token进行校验
jwt.verify(token, secret, (err, decoded) => {
console.log(err);
if (err) {
console.log('token 已经失效了.');
} else {
console.log(`token data is ${JSON.stringify(decoded)}`);
}
});
}, 5000);
生成的token为一个很长的字符串,分为三部分,每部分由.号隔开,即 头部.载荷.签名,5秒后token校验结果为error,即token已经过期,校验的时候,会得到token的解码数据,主要包括生成token时候的元数据、token的签发时间(iat)、token的过期时间(exp)
// 生成的token字符串为
eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJmb28iOiJiYXIiLCJpYXQiOjE1NjY3MzE4MzEsImV4cCI6MTU2NjczMTgzNn0.cZZkExNnVqBtnfQN2vtU2Z7JB0PBo1CFyC5NiOywg54
// token decoded后的数据
token data is {"foo":"bar","iat":1566731831,"exp":1566731836}
三、封装axios
由于在使用jwt认证的时候,客户端向服务器发起请求的时候,都要带上token,即要获取到token并将其放到请求头的Authorization字段中,服务器才能从authorization中取出token并进行校验,所以我们必须通过拦截器去实现,在每次请求之前将请求进行拦截,然后添加上token,再继续向服务器发起请求。
import axios from "axios";
class Request {
constructor() {
this.baseURL = process.env.NODE_ENV === 'development' ? 'http://localhost:3000' : '/'; // 设置请求baseURL
this.timeout = 2000; // 设置请求超时时间
}
request(config){// 这里的config是请求的时候传递的参数配置对象,比如url、method、data等
const instance = axios.create({ // 创建axios实例
baseURL: this.baseURL,
timeout: this.timeout,
});
// 设置拦截器
instance.interceptors.request.use((config) => { // 请求拦截之后就是要使用这个config, config表示整个请求对象
config.headers.Authorization = localStorage.getItem('token'); // 将token从localStorage中取出并添加到请求头的Authorization字段上
return config; // 返回请求对象,继续向服务器发起请求
}, err => Promise.reject(err));
// 设置响应拦截器
instance.interceptors.response.use(res => res.data, err => Promise.reject(err));
return instance(config);
}
}
export default new Request();
四、通过路由钩子进行登录校验
我们需要在路由跳转之前,进行登录校验,即校验登录的token是否已经过期,如果token没有失效,则可以继续访问页面;如果token已经失效,那么检查一下所访问的页面是否需要登录才能访问,如果是需要登录后才能访问,那么跳转到登录页面;如果是不需要登录也能访问的页面则继续访问;
const whiteList = ["/"]; // 定义一个白名单列表
router.beforeEach(async (to, from, next) => {
if (whiteList.includes(to.path)) { // 如果是访问的白名单中的页面
return next(); // 不需要校验,直接返回继续访问该页面
}
const isTokenAvailable = await store.dispatch('validate'); // 校验token是否失效
if (isTokenAvailable) { // 如果token未失效
if(to.path === "/login") { // 如果访问的是login页面,则回到首页
next("/");
} else { // 如果访问的不是login页面,则继续访问当前要访问的页面
next();
}
} else { // 如果token失效了
const needLogin = to.matched.some(item => item.meta.needLogin); // 检测要访问的页面是否需要登录才能访问
if(needLogin) { // 如果访问的页面是需要登录的
next("/login"); // 跳转到登录页面
} else { // 如果访问的页面是不需要登录的,则直接继续访问
next();
}
}
});
上面item.meta.needLogin,这个needLogin是在router中进行自定义配置的,在配置路由的时候,允许通过meta属性配置一些自定义的元数据,如下所示:
export default new Router({
routes: [
{
path: '/profile',
name: 'profile',
component: Profile,
meta: {needLogin: true}
}
]
})
五、总结
jwt认证,主要就是Vue路由钩子beforeEach()的应用,以及请求拦截器的封装,在每次路由跳转前进行token认证(校验),检测token是否失效,其校验过程就是向服务器发起一个请求,比如"/validate",由于客户端请求拦截器的作用,会在发起"/validate"请求之前,在请求头的Authorization字段加上token,服务器收到token后就能对token是否有效进行校验了,然后返回token校验结果,客户端再根据token的校验结果进行路由的具体跳转。
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持脚本之家。
php vue jwt 实战,Vue路由之JWT身份认证的实现方法相关推荐
- vue进阶实战 vue进阶课程 vue进阶
每个章节都有对接的文章链接 1. r e f s , refs, refs,parent,$children 基础使用:参考vue官方文档 $refs 父组件调用子组件的方法或属性 $parent 子 ...
- 实战解读ASP.NET Core身份认证
长话短说:上文我们聊了 ASP.NET Core 基于声明的访问控制到底是什么鬼? 今天我们乘胜追击:聊一聊ASP.NET Core 中的身份验证. 身份验证是确定用户身份的过程.授权是确定用户是否有 ...
- vue接入万达IAM(统一身份认证登录)记录
1.需先提前申请测试环境下的 clientId 和 clientSecret 2.第一步获取授权码的 code 接口 和 退出登录的接口,均通过 window.loaction的方式请求 即: win ...
- axios vue 动态date_Web前端Vue系列之-Vue.js 实战
课程简介: 课程目标:通过本课程的学习,让大家掌握Vue.js的进阶知识并在项目中应用. 适用人群:具有一定vue开发基础的开发人员. 课程概述:Vue (读音 /vjuː/,类似于 view) 是一 ...
- 使用vue-i18n切换中英文-网页语言切换案例-vue文件中或路由(Router)文件中使用
vue-i18n地址 安装 npm install vue-i18n 使用 在 main.js 中引入 vue-i18n (前提是要先引入 vue) import VueI18n from 'vue- ...
- Node.js数据库与身份验证(MySQL,前后端身份认证:Session 认证机制,JWT认证机制)
目录 MySQL SQL 语句语法 where 条件.and 和 or 运算符.order by 排序.count(*) 函数 在express项目中操作 MySQL 安装与配置 mysql 模块 1 ...
- 前后端身份认证:session身份认证,JWT认证
文章目录 前后端身份认证 1.概述 2.不同开发模式下的身份认证 3.关于HTTP协议的无状态性 4.Cookie 4.1 介绍 4.2 cookie特点 4.3 cookie分类 4.4 Cooki ...
- Vue项目使用拦截器和JWT验证 完整案例
挺详细的一个案例项目,值得参考! 作者:YXi https://juejin.im/post/6844903959883218951) https://gitee.com/gitee_fanjunya ...
- springboot+jwt+shiro+vue+elementUI+axios+redis+mysql完成一个前后端分离的博客项目(笔记,帮填坑)
根据B站up主MarkerHub视频制作的一个笔记 我的博客 B站博主链接: https://www.bilibili.com/video/BV1PQ4y1P7hZ?p=1 博主的开发文档: http ...
最新文章
- matlab 小波变换_连续小波变换实现方法的总结及其程序详解
- 在C/C++代码中使用SSE等指令集的指令(1)介绍
- leftjoin多表联合查询_leetcode-sql练习精讲系列文章——一、多表如何连接
- JavaScript中各存在性函数
- django 中多字段主键(复合、联合主键)
- 数据结构与算法学习笔记02-单向链表
- java9 多版本兼容jar_Java 9 多版本兼容 jar 包
- JavaSE: SuppressWarnings[转]
- ASP存储过程在开发中的应用分析。
- 基于树莓派的专用摄像头实时监控
- rtc驱动模型及rx8025驱动学习
- 机器学习——数学建模应用
- Uplift 经典模型介绍
- Java教程:如何使用Jib插件容器化SpringBoot应用?
- vim插件管理利器:pathogen
- antd走马灯组件自定义前进后退按钮
- 使用iperf工具,用java的swing,编写网络带宽监测小工具
- Java最牛教材!javaexcel合并单元格样式
- 绕过AMSI详细指南:如何利用DLL hijack轻松绕过AMSI
- 【渝粤题库】陕西师范大学151206 中级财务管理作业 (专升本)