Vue中登录验证成功后保存token,并每次请求携带并验证token操作
在vue中，可以用**Storage（sessionStorage，localStorage）**来存储token，也可以用vuex来存储（但要考虑页面刷新数据消失问题，可以在vuex用Storage），
下面介绍用localStorage来存储：
在登录请求成功后，会返回一个token值，用loaclStorage保存
localStorage.setItem('token',res.data.token)
在main.js中设置全局请求头和响应回来的判断
//设置axios请求头加入token
Axios.interceptors.request.use(config => {
if (config.push === '/') {
} else {
if (localStorage.getItem('token')) {
//在请求头加入token，名字要和后端接收请求头的token名字一样
config.headers.token=localStorage.getItem('token');
}
}
return config;
},
error => {
return Promise.reject(error);
});
//=============================
//响应回来token是否过期
Axios.interceptors.response.use(response => {
console.log('响应回来：'+response.data.code)
//和后端token失效返回码约定403
if (response.data.code == 403) {
// 引用elementui message提示框
ElementUI.Message({
message: '身份已失效',
type: 'err'
});
//清除token
localStorage.removeItem('token ');
//跳转
router.push({name: 'login'});
} else {
return response
}
},
error => {
return Promise.reject(error);
})
在router中的index设置全局守卫来判断是否存在token，不存在就返回登录页
router.beforeEach((to, from, next) => {
//to到哪儿 from从哪儿离开 next跳转 为空就是放行
if (to.path === '/') {
//如果跳转为登录，就放行
next();
} else {
//取出localStorage判断
let token = localStorage.getItem('token ');
if (token == null || token === '') {
console.log('请先登录')
next({name: 'login'});
} else {
next();
}
}});
补充知识：Vue获取并存储服务器返回的AuthorizationToken信息并给每次请求添加上token
由于后台是用jwt的token进行身份权限验证，后台在登录后把token添加响应头里，所以前台需要把这个token存放起来，并给每次请求的请求头添加上token，服务器才能获取token进行身份认证。
前台使用vue项目:
loging.vue(登录组件)
{
submitForm(formName) {
this.$axios
.post('/api/admin/login', {
userName: this.ruleForm.userName,
password: this.ruleForm.password
})
.then(successResponse => {
this.responseResult = JSON.stringify(successResponse.data)
this.msg = JSON.stringify(successResponse.data.msg)
if (successResponse.data.code === 200) {
this.msg='';
localStorage.setItem('userName',this.ruleForm.userName);
//获取并存储服务器返回的AuthorizationToken信息
var authorization=successResponse.headers['authorization'];
localStorage.setItem('authorization',authorization);
//登录成功跳转页面
this.$router.push('/dashboard');
}
})
.catch(failResponse => {})
}
}
main.js(全局配置js):
//自动给同一个vue项目的所有请求添加请求头
axios.interceptors.request.use(function (config) {
let token = localStorage.getItem('authorization');
if (token) {
config.headers['Authorization'] = token;
}
return config;
})
这里还需要考虑token过期失效的问题，博主将会在后续另写博客补充。
以上这篇Vue中登录验证成功后保存token,并每次请求携带并验证token操作就是小编分享给大家的全部内容了，希望能给大家一个参考，也希望大家多多支持我们。
相关推荐
-
在vue中获取token,并将token写进header的方法
需要准备的东西:Vue+axios+Vuex+Vue-router 1.在login.vue中通过发送http请求获取token //根据api接口获取token var url = this.HOST + "/session"; this.$axios.post(url, { username: this.loginForm.username, password: this.loginForm.pass }).then(res => { // console.log(res.d
-
Vue中的验证登录状态的实现方法
Vue项目中实现用户登录及token验证 先说一下我的实现步骤: 使用easy-mock新建登录接口,模拟用户数据 使用axios请求登录接口,匹配账号和密码 账号密码验证后, 拿到token,将token存储到sessionStorage中,并跳转到首页 前端每次跳转时,就使用导航守卫(vue-router.beforeEach)判断 sessionStorage 中有无 token ,没有就跳转到登录页面,有则跳转到对应路由页面. 注销后,就清除sessionStorage里的token信息
-
vue登录注册及token验证实现代码
在大多数网站中,实现登录注册都是结合本地存储cookie.localStorage和请求时验证token等技术.而对于某些功能页面,会尝试获取本地存储中的token进行判断,存在则可进入,否则跳到登录页或弹出登录框. 而在vue单页中,我们可以通过监控route对象,从中匹配信息去决定是否验证token,然后定义后续行为. 具体实现代码如下: 1. 利用router.beforeEach钩子, 判断目标路由是否携带了相关meta信息 // router.js import Vue from 'v
-
Vue中登录验证成功后保存token,并每次请求携带并验证token操作
在vue中,可以用**Storage(sessionStorage,localStorage)**来存储token,也可以用vuex来存储(但要考虑页面刷新数据消失问题,可以在vuex用Storage), 下面介绍用localStorage来存储: 在登录请求成功后,会返回一个token值,用loaclStorage保存 localStorage.setItem('token',res.data.token) 在main.js中设置全局请求头和响应回来的判断 //设置axios请求头加入toke
-
vue中axios防止多次触发终止多次请求的示例代码（防抖）
需求 例如在搜索框中,并不是你输入一个字就需要渲染一次数据,而是取最后一次的输入内容进行搜索. 连续按下 AAAAA ,只取最后一次按下时搜索框的内容(即:AAAAA)进行搜索. 而不是搜索跟 A(第一次按下),AA(第二次按下),AAA相关联的内容 本文例子: 检测用户输入的值,监测这个值,然后根据值调用接口查询结果 代码: <template> <input type="text" v-model="message"> <temp
-
vue中v-for循环选中点击的元素并对该元素添加样式操作
相信大家都会遇到这种情况:v-for循环时,我只需要点击到的元素做出相应反应,其他的元素不变:但是往往所有v-for循环出的元素都会变化.如下面的代码:我需要点击到的元素添加一个类样式,其他元素不变,但是这样会导致所有的元素都会变化 html: <div v-for = "(item,index) in items" :class = 'addclass:isactive' @click='onclick()'> <span>{{item.name}}</
-
python+excel接口自动化获取token并作为请求参数进行传参操作
1.登录接口登录后返回对应token封装: import json import requests from util.operation_json import OperationJson from base.runmethod import RunMethod class OperationHeader: def __init__(self, response): self.response = json.loads(response) def get_response_token(self
-
vue中如何下载文件导出保存到本地
目录 vue下载文件导出保存到本地 另一种情况 vue中a标签下载本地文件-未找到,原因及解决 错误代码 原因 解决 vue下载文件导出保存到本地 先分析如何下载:先有一个链接地址,然后使用 location.href或window.open()下载到本地 看看返回数据 res.config.url 中是下载链接地址,res.data 中是返回的二进制数据 如何下载 ... <el-button icon="el-icon-download" @click="downl
-
Vue中input被赋值后,无法再修改编辑的问题及解决
目录 input被赋值后,无法再修改编辑 我们直入主题 方法一 方法二 vue综合问题归纳input框赋值后不能进行编辑 项目场景 问题描述 原因分析 解决方案 input被赋值后,无法再修改编辑 我们直入主题 上面是我司的业务逻辑图,使用elementui框架,如图,请求数据赋值后,不仅有检测报错信息,而且还有无法修改编辑的问题. 起初以为是我的设置的对象问题,困扰我许久. 后来,翻阅了大佬的文章才了解. <el-form ref="formInline" :inline=&q
-
vue中el-tree增加节点后如何重新刷新
目录 给el-tree增加节点后重新刷新 el-tree全树刷新,节点刷新 单节点刷新 全树刷新 给el-tree增加节点后重新刷新 1.树形组件 <el-tree v-if="openPanel" //重加载 :data="data" //树形数据 :props="defaultProps" node-key="id" //默认展开节点 :default-expanded-keys="[-1]" /
-
解析SpringSecurity自定义登录验证成功与失败的结果处理问题
一.需要自定义登录结果的场景 在我之前的文章中,做过登录验证流程的源码解析.其中比较重要的就是 当我们登录成功的时候,是由AuthenticationSuccessHandler进行登录结果处理,默认跳转到defaultSuccessUrl配置的路径对应的资源页面(一般是首页index.html). 当我们登录失败的时候,是由AuthenticationfailureHandler进行登录结果处理,默认跳转到failureUrl配置的路径对应的资源页面(一般是登录页login.html). 但是
-
Python 自动登录淘宝并保存登录信息的方法
前段时间时间为大家讲解了如何使用requests库模拟登录淘宝,而今天我们将对该功能进行丰富.所以我们把之前的那个版本定为1.0,而今天修改的版本定为2.0.版本的迭代意味着功能的升级,那今天的2.0版本较之前的1.0版本有哪些改进呢?我们一起来看看! 1.0版本实现步骤 我们先来回顾一下模拟登录淘宝的步骤吧,我们还是先看看淘宝登录的详细时序图: 这是淘宝网登录的一个请求流程,而我们模拟登录也是根据这样的一个流程.但是在代码模拟登录的时候就不会分的这么细,我们根据封装的思想将整个登录流程封装在四
-
可能是vue中使用axios最详细教程
目录 安装: 较科学的封装好的axios:(new-axios.js) main.js 引入,添加到vue原型 使用 以下步骤一般不需要 总结 前提条件:vue-cli 项目 安装: npm axios from 'axios' 较科学的封装好的axios:(new-axios.js) import axios from 'axios' import { Notify } from 'vant'; // import Vue from 'vue' // import store from '@/