Vue中登录验证成功后保存token,并每次请求携带并验证token操作

2024-09-27 18:34:33

在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 '@/

Vue中登录验证成功后保存token,并每次请求携带并验证token操作

相关推荐

随机推荐