token拦截器android_vue.js添加拦截器,实现token认证(使用axios)

什么是token?

token是一个用户自定义的任意字符串,目前开发中,token都是在服务端生成并且token的值会保存到服务器后台。只有服务器和客户端知道这个字符串,于是,这个token就成了两者之间的秘钥,它可以让服务器确认请求是来自客户端还是恶意的第三方。

为什么使用token?

简单地说,token的使用就是为了数据安全,前台是通过接口路径(URL)的调用来获取数据的,如果恶意的第三方知道了某一个接口路径,那么,他便可以直接通过接口路径在网页上直接获取该接口的所有数据信息。如果添加了token,类似于这种恶意的行为便不会产生。token是在用户登录的时候产生的,在前台登录某一个系统并且获得一个token之后,前台需要将该token设置在请求头上,以确保之后的每一次请求都是带着该“令牌“的,当然后台的接口请求也设置了该请求头。(如果对后台生成token,并且对该token的设置以及存储感兴趣的话,请关注下一篇文章~~~)

基于token验证的流程

客户端使用用户名跟密码请求登录

服务端收到请求,去验证用户名和密码(后台根据请求去数据库查找是否有该用户)

验证成功后,服务端会签发一个token(该token值一般都会存入Redis数据库中,并设置过期时间),再把这个token发送给客户端

客户端收到token之后,一般存储在localStorage(HTML5新特性,只要不手动删除存储的内容,存储的信息会一直存在)中

客户端每次向服务端请求资源的时候需要带着服务端签发的token

服务端收到请求,然后去验证客户端请求里面带着的token(token是否为该用户的令牌以及token是否有效等),如果验证成功,就向客户端返回请求的数据

什么是axios?

Axios 是一个基于 promise 的 HTTP 库,可以用在浏览器和 node.js 中。

vue实现axios拦截,token验证

在简单介绍完这些基础知识以及用到的插件之后,我们便要开始今天的主题--token验证。

首先在vue.js 中下载axios,npm install axios,在main.js文件中全局使用:

import axios from 'axios';

Vue.prototype.$http = axios;

复制代码

这样引入之后,在其他的文件中便可以使用$http来调用接口:

getRoomDetail() {

this.$http.get(this.roomDetailApi).then(

res => {

this.roomDetail = res.data.data;

},

err => {

console.log("接受数据错误" + err);

}

).catch(err => {

console.log("服务器错误" + err);

})

}

复制代码

以上步骤只是简单的实现了前后台的交互(在前台调用后台接口来获取数据),接下来我们便要进一步学习,实现token的验证。

根据上面的介绍,我们在成功登录后台并拿到返回给的token之后,需要使用localStorage全局存储,实现代码如下:

// 用户登录

login() {

this.postData = {

account: this.userInfo.account,

password: this.$md5(this.userInfo.password),

};

this.$http.post(configIp.apiConfig.user.login, this.postData)

.then(res => {

if (res.data.errno === 0) {

this.$Message.success('登陆成功');

this.$router.push('roomInfo');

//全局存储token

window.localStorage["token"] = JSON.stringify(res.data.data.token);

} else {

this.$Message.error('登录失败');

this.forgetPassword = true;

}

}).catch(err => {

console.log("登录失败");

})

},

复制代码

接下来,我们要做的就是设置请求头,在之后的接口请求过程中,都要通过token的认证来获取数据,添加 http.js 文件(拦截器)

import axios from 'axios';

import router from './router';

// axios 配置

axios.defaults.timeout = 8000;

axios.defaults.baseURL = 'https://api.github.com';

// http request 拦截器

axios.interceptors.request.use(

config => {

if (localStorage.token) { //判断token是否存在

config.headers.Authorization = localStorage.token; //将token设置成请求头

}

return config;

},

err => {

return Promise.reject(err);

}

);

// http response 拦截器

axios.interceptors.response.use(

response => {

if (response.data.errno === 999) {

router.replace('/');

console.log("token过期");

}

return response;

},

error => {

return Promise.reject(error);

}

);

export default axios;

复制代码

添加拦截器之后,修改 main.js文件:

将上面

import axios from 'axios';

Vue.prototype.$http = axios;

复制代码

改为:

import http from './http'; //此处问http文件的路径

Vue.prototype.$http = http;

复制代码

完成该步骤之后,基本的操作已经实现了,下面让我们查看一下是否已经添加请求头:

以上操作实现了添加请求头token,在之后的请求中,会自动添加该请求头,但是不是每一个页面都需要登录权限(后台会实现不需要进行token验证的筛选),那么前台也需要通过路由的meta标签对需要做校验的路由页面进行标记,其他页面则不需要验证,代码如下:

{

path: '/userInfo',

name: 'userInfo',

meta: {

requireAuth: true, // 该路由项需要权限校验

}

component: userInfo

}, {

path: '/userList',

name: 'userList', // 该路由项不需要权限校验

component: userInfo

}

复制代码

之后,我们可以定义一个路由防卫,每次路由跳转,我们都来做一下权限校验,参考代码如下:

router.beforeEach((to, from, next) => {

if (to.meta.requireAuth) { // 判断该路由是否需要登录权限

if (localStorage.token) { // 获取当前的token是否存在

console.log("token存在");

next();

} else {

console.log("token不存在");

next({

path: '/login', // 将跳转的路由path作为参数,登录成功后跳转到该路由

query: {redirect: to.fullPath}

})

}

}

else { // 如果不需要权限校验,直接进入路由界面

next();

}

});

复制代码

到此,用vue.js实现前台添加请求头,通过axios设置拦截器添加token就已经实现了。

如果对node.js实现生成token,处理token等操作感兴趣,希望关注下一篇文章~~~~~

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/506936.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

计算机网络项目——最小网元设计(阶段四)

目录阶段目标设计描述1、实体编址2、路由表设计3、路由配置4、路由器的存储转发5、端到端的图片传输测试情况其他想说的话阶段目标 本阶段需要对实体进行编址,实现NET层的IP地址到MAC层地址的映射,解决各层实体的标定区分和数据投递,同时网络…

扫一扫 移动端_移动端手机APP 身份证识别 手机扫一扫离线识别

证件识别是指能实现拍照自动输入身份信息,让用户完全告别手动输入身份证、驾驶证、行驶证等证件信息。它支持Android、 iOS 、Java、Linux等多终端形式接入,电 一山一,领九九,六八九八菱还能通过多样化的结果输出,满足…

电脑解锁后黑屏有鼠标_电脑开机黑屏只有鼠标

电脑开机黑屏只有鼠标经常使用电脑的朋友都会遇到电脑的各种故障,例如电脑开机黑屏只有鼠标,那么该怎么办呢?下面一起来看看电脑开机黑屏只有鼠标的解决办法。方法一、如果自己对电脑不懂的话,最简单的方法就是强制关机,这个关机…

figma应用——面向用户的咖啡点单APP的设计过程记录

目录概述设计阶段1、Brainstorm2、用户分析(1)用户画像(2)竞品分析(3)用户旅程地图(4)用户需求分析3、点单APP的demo设计(1)整体布局逻辑概览(2&a…

java右移位_java 、移位操作方法

<java" id"highlighter_505373">以上是正整数&#xff0c;运算结果如下。接下来看看将负数进行左移2位操作是什么情况&#xff0c;运算结果如下。为什么会-10的二进制会出现这么多的1呢&#xff1f;仔细数一下刚好有32位。首先需要了解的是java负数存储是…

打docker镜像_使用docker构建自己的镜像

在docker中&#xff0c;我们使用docker build构建一个新的镜像&#xff0c;构建镜像之前需要去编写Dockerfile这个文件才能否建一个新的镜像。官方文档&#xff1a;https://docs.docker.com/engine/reference/builder/#fromFROM&#xff1a;用于指定基础镜像RUN&#xff1a;构建…

3d打印主要的切片参数类型_3D打印混凝土工艺参数对成型精度的影响

3D打印混凝土技术作为新兴技术&#xff0c;由于其不需要模板&#xff0c;节省大量劳动力和可打印复杂造型的特点&#xff0c;得到了大家的关注。但是&#xff0c;利用3D打印技术建造想要的结构&#xff0c;成型精度是必须考虑的一个问题。成型精度受材料性能、打印设备及打印工…

web中hasmoreelements_Web开发模式【Mode I 和Mode II的介绍、应用案例】

开发模式的介绍在Web开发模式中&#xff0c;有两个主要的开发结构&#xff0c;称为模式一(Mode I)和模式二(Mode II).首先我们来理清一些概念吧&#xff1a;DAO(Data Access Object)&#xff1a;主要对数据的操作&#xff0c;增加、修改、删除等原子性操作。Web层&#xff1a;界…

网络传输大端序_大端、小端与网络字节序

大端(Big-Endian)&#xff0c;小端(Little-Endian)以及网络字节序的概念在编程中经常会遇到&#xff0c;网络字节序(Network Byte Order)一般是指大端(Big-Endian&#xff0c;对大部分网络传输协议而言)传输&#xff0c;大端小端的概念是面向多字节数据类型的存储方式定义的&am…

poi的sax模式读取xls_POI SAX 如何修改大excel 文件内容-问答-阿里云开发者社区-阿里云...

I think POI is using too much memory! What can I do?This one comes up quite a lot, but often the reason isnt what you might initially think. So, the first thing to check is - whats the source of the problem? Your file? Your code? Your environment? Or …

cupload怎么保存图片_原生js的图片上传插件cupload

插件描述&#xff1a;支持图片预览、像素限制、大小限制、多图上传、更新模式下页面初始化加载图片更新时间&#xff1a;2020-09-25 00:23:49更新说明&#xff1a;添加 删除时&#xff0c;同时删除服务器图片的功能&#xff0c;文档提供php实例。添加参数Url参数更新 {ele: &q…

mysql 半同步_mysql 主从同步 与 半同步

mysql主从同步复制定义主从同步使得数据可以从一个数据库服务器复制到其他服务器上&#xff0c;在复制数据时&#xff0c;一个服务器充当主服务器(master)&#xff0c;其余的服务器充当从服务器(slave)。通过配置文件&#xff0c;可以指定复制所有的数据库&#xff0c;某个数据…

mysql内存数据库性能_Mysql内存表配置及性能测试

centos7 mysql数据库安装和配可以参考一下文章&#xff0c;基本照做就可以了(我选的方法二)&#xff1a;http://www.cnblogs.com/starof/p/4680083.html说到内存表&#xff0c;首先有两个概念简单区分下&#xff1a;1.临时表&#xff1b;2.内存表&#xff1b;临时表与内存表的区…

mysql字符集排序规则_MySQL原理 - 字符集与排序规则

任何计算机存储数据&#xff0c;都需要字符集&#xff0c;因为计算机存储的数据其实都是二进制编码&#xff0c;将一个个字符&#xff0c;映射到对应的二进制编码的这个映射就是字符编码(字符集)。这些字符如何排序呢&#xff1f;决定字符排序的规则就是排序规则。查看内置字符…

mysql服务器默认操作字符集,如何在mysql中找到默认服务器字符集?

Using MySQL on FreeBSD 8.2. How do I find out the default server character set? Is there some command I can run or file I can check?UPDATEActually I want to know how to find both the default server character set and the current server character set.解决方…

mysql异常修复_MySQL错误修复:Table xx is marked as crashed and last (automatic?) repair failed...

问题一 Table xx is marked as crashed and last (automatic?) repair failed有开发找到我&#xff0c;说数据库坏了&#xff0c;连不上数据库&#xff0c;看了下 MySQL 的错误日志&#xff0c;报错如下&#xff1a;Error: Table ./db_name/table_name is marked as crashed a…

mysql 改变表的类型吗_mysql中修改表类型所带来的问题探讨

对于MySQL数据库&#xff0c;如果你要使用事务以及行级锁就必须使用INNODB引擎。如果你要使用全文索引&#xff0c;那必须使用myisam,那如何修改修改MySQL的引擎为INNODB呢&#xff0c;下面介绍一个修改方法。对于MySQL数据库&#xff0c;如果你要使用事务以及行级锁就必须使用…

mysql 字符串 截取字母_MySQL字符串函数:字符串截取

MySQL 字符串截取函数&#xff1a;left(), right(), substring(), substring_index()。还有 mid(), substr()。其中&#xff0c;mid(), substr() 等价于 substring() 函数&#xff0c;substring() 的功能非常强大和灵活。1. 字符串截取&#xff1a;left(str, length)mysql> …

建立学生选课表 mysql 语句_学生选课数据库SQL语句45道练习题整理及mysql常用函数(20161019)...

学生选课数据库SQL语句45道练习题&#xff1a;一、 设有一数据库&#xff0c;包括四个表&#xff1a;学生表(Student)、课程表(Course)、成绩表(Score)以及教师信息表(Teacher)。四个表的结构分别如表1-1的表(一)~表(四)所示&#xff0c;数据如表1-2的表(一)~表(四)…

java mysql jsp分页代码_JAVA/JSP学习系列之六(MySQL翻页例子)

JAVA/JSP学习系列之六(MySQL翻页例子)更新时间&#xff1a;2006年10月13日 00:00:00 作者&#xff1a;一、运行前准备下载了mysql的jdbc驱动(一个jar文件)并加载在CLASSPATH(方法见《JAVA/JSP学习系列之一(JDK安装) 》)(如果找不到&#xff0c;请从本站下载)建一个MySQL数据库…