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

在vue中，可以用sessionStorage或localStorage来存储token，也可以用vuex来存储（但要考虑页面刷新数据消失问题，可以在vuex用Storage），下面介绍用localStorage来存储token

① login.vue组件中登录成功后存储token

login() {this.$axios.post(" **** ", {username: this.username,password: this.$md5(this.password),}).then((res) => {if (res.data.code == 200) {var token = res.data.token;window.localStorage.setItem("token", token);this.$router.push({ path: "/index" });} });
},

② 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 => { //和后端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中登录验证成功后保存token,并每次请求携带并验证token操作相关推荐

cas后端返回html直接跳转,CAS验证成功后不能跳转到登陆成功的主页面解决办法...
CAS验证成功后不能跳转到登陆成功的主页面现在部署了CAS,有一个应用,下载输入应用的URL可以正确跳转到CAS服务的登陆界面,登陆验证通过后页面却跳转到了应用的登陆界面,不能直接进入登陆成功的主页 ...
Spring Security继承AbstractAuthenticationProcessingFilter验证成功后自动跳转地址“/”
Spring Security版本:5.5.1 最近学Spring Security,实现自定义的前后端分离的身份验证,发现通过继承AbstractAuthenticationProcessingFi ...
请问android直接post请求登录地址成功后，webview还是现实登录界面
============问题描述============ 之前登录是这样做的: webview.loadUrl(调js登录的方法), 这个js方法其实也就是post请求一个登录地址现在我直接做一个 ...
Vue中el-table追加行后固定列滚动错位问题
Vue中el-table追加行后固定列滚动错位问题一.问题描述偶然发现一个问题,但是并没有找到解决方案,自己调试了两个多小时终于解决. 先贴出问题业务描述:在已查询完全部的符合条件的数据后,表格 ...
FTP登录服务器成功后，如果切换为被动模式，提示：227 Entering Passive Mode
FTP登录服务器成功后,如果切换为被动模式,返回的提示语含义? 227 Entering Passive Mode (10,199,75,133,214,27) 那么后面的,214,27它是如何计算的 ...
python excel token_python+excel接口自动化获取token并作为请求参数进行传参操作
1.登录接口登录后返回对应token封装: import json import requests from util.operation_json import OperationJson from ...
登陆验证成功后的跳转页面依然保留用户信息
从login.jsp到 dologin.jsp 再到 login_success.jsp,在登陆成功后,两种方法可让 login_success.jsp依然获取表单信息: 1.Session内置对象: ...
java项目（注册和登录（成功后查看商品的信息））
文章目录声明第一步: 第二步: 第三步: 第四步: 第五步第六步: 第七步: 声明题目:实现登录和注册功能登录成功后可以查看所有商品的信息(商品名称,价格,销量) 第一步: package ...
解决vue中使用v-html解析后table表格的线不见了
vue中使用 v-html 解析富文本 1.在编辑器中输入什么就显示什么 2.使用v-html解析后有问题可以看看☞☞ 官网地址需要注意的是:从编辑器中获取的 html 代码是不包含任何样式的纯 ...

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

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

最新文章

热门文章