-
2020-11-19 14:49:32
在登录请求成功后,会返回一个
token
值,用loaclStorage
保存localStorage.setItem('token',res.data.token)
一般会在
main.js
或者是单独的request.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中登录验证成功后保存token,并每次请求携带并验证token操作
2020-11-19 17:55:54在vue中,可以用**Storage(sessionStorage,localStorage)**来存储token,也可以用vuex来存储(但要考虑页面刷新数据消失问题,可以在vuex用Storage), 下面介绍用localStorage来存储: 在登录请求成功后,会返回... -
Vue中登录验证成功后保存token,并每次请求携带并验证token
2020-06-23 09:32:48在vue中,可以用**Storage(sessionStorage,localStorage)**来存储token,也可以用vuex来存储(但要考虑页面刷新数据消失问题,可以在vuex用Storage),下面介绍用Storage来存储: 在登录请求成功后,会返回一个...在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在路由中验证token是否存在的简单实现
2020-10-16 00:27:52今天小编就为大家分享一篇vue在路由中验证token是否存在的简单实现,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧 -
vue项目请求携带token配置
2021-04-05 17:12:03在前后端完全分离的情况下,Vue项目中实现token验证大致思路如下: 1.第一次登录的时候,前端调后端的登录接口,发送用户名和密码 2.后端收到请求,验证用户名和密码,验证成功,就给前端返回一个token 3.前端拿到...在前后端完全分离的情况下,Vue项目中实现token验证大致思路如下:
1.第一次登录的时候,前端调后端的登录接口,发送用户名和密码
2.后端收到请求,验证用户名和密码,验证成功,就给前端返回一个token
3.前端拿到token,将token存储到localStorage和vuex中,并跳转路由页面ps:存到localStorage是防止页面刷新时,vuex中的数据丢失
4.前端每次跳转路由,就判断 localStroage 中有无 token ,没有就跳转到登录页面,有则跳转到对应路由页面
ps:使用路由守卫,阻止用户没登录就访问页面
5.在全局请求中添加token请求头
6.后端判断请求头中有无token,有token,就拿到token并验证token,验证成功就返回数据,验证失败(例如:token过期)就返回401,请求头中没有token也返回401ps: 设置全局响应结果,拦截状态码为401的响应结果,并提示用户重新登录
7.重新调取登录接口成功,会在回调函数中将token存储到localStorage和vuex中,覆盖掉上次的token
代码文件如下:
login.vue登录逻辑login(formName) { //这里的表单的验证 this.$refs[formName].validate((valid) => { if (valid) { this.$axios.post("/user/login", { account: this.ruleForm.name, password: this.ruleForm.psw, }).then((res) => { //这里是判断接口是否请求成功 if (res.data.code === "00000") { //接口请求成功将token请求头存到vuex,再进行路由跳转 //这里接口返回的token名为x-auth-token this.$store.commit("changeLogin", res.headers["x-auth-token"]); this.$router.push({ path: "/index" }); this.$message({ message: "登录成功", type: "success", }); } else { this.$message({ message: res.data.message, type: "error", }); } }); } else { console.log("error submit!!"); return false; } }); },
store.js存储token
import Vue from 'vue' import Vuex from 'vuex' Vue.use(Vuex) export default new Vuex.Store({ state: { //每次都从本地中获取token,这里存的token字段名为Authorization Authorization: localStorage.getItem('Authorization') ? localStorage.getItem('Authorization') : '' }, mutations: { //改变Authorization的值同时改变localStorage的Authorization值 changeLogin(state, token) { state.Authorization = token; localStorage.setItem('Authorization', token); } } })
router.js路由守卫
import Vue from 'vue' import Router from 'vue-router' import Login from './views/login.vue' import Home from './views/home.vue' Vue.use(Router) const router = new Router({ mode: 'hash', base: process.env.BASE_URL, routes: [ //当页面路径为/时重定向到/login页面 { path: '/', redirect:'/login', }, { path: '/login', name: 'login', component: Login }, { path: '/home', name: 'home', component: Home, } ] }) //当当前token为空时,不允许访问其他页面,直接跳转到登录页面 router.beforeEach((to, from, next) => { if (to.path === '/login') { next(); } else { let token = localStorage.getItem('Authorization'); if (token === null || token === '') { next('/login'); } else { next() } } }) export default router
axios.js请求和响应配置
import axios from "axios"; import router from '../router' import { Notification } from 'element-ui'; let config = { baseURL: process.env.NODE_ENV === 'production' ? 'https://www.jettacampus.com/epidemic' : "/api",//配置生产环境路径和开发路径 withCredentials: true, // 允许跨域 }; const _axios = axios.create(config); //配置请求的参数 _axios.interceptors.request.use(config => { //配置token if (localStorage.getItem('Authorization')) { config.headers['X-Auth-Token'] = localStorage.getItem('Authorization'); } return config; }, error => { return Promise.reject(error); }) //配置响应的参数 _axios.interceptors.response.use(response => { //当token过期或者不存在时,后台返回状态码401,此时页面跳转到登录页面 if (response.status === 401) { router.push({ path: "/login" }); Notification({ message: "登录信息已过期,请重新登录", type: "error", }); return ; } return response }, error => { return Promise.reject(error); }); export default _axios
main.js挂载好store.js、router.js、axios.js三个文件
import Vue from 'vue' import App from './App.vue' import router from './router' import store from './store' import _axios from './utils/axios' import ElementUI from 'element-ui'; import 'element-ui/lib/theme-chalk/index.css'; Vue.config.productionTip = false Vue.use(ElementUI); Vue.prototype.$axios = _axios new Vue({ router, store, render: h => h(App) }).$mount('#app')
参考文章:https://blog.csdn.net/weixin_33462804/article/details/112036794
-
vue实现token登录验证
2022-03-24 09:48:35token可用于登录验证和权限管理。...前端之后的每一个对后端的请求都要在请求头上带上token,后端查看请求头是否有token,拿到token检查是否过期,返回对应状态给前端。 若token已过期,清除token信息,跳转至登录token可用于登录验证和权限管理。
大致步骤分为:
- 前端登录,post用户名和密码到后端。
- 后端验证用户名和密码,若通过,生成一个token返回给前端。
- 前端拿到token存储到localStorage管理,登录成功进入首页。
- 之后前端每一次权限操作如跳转路由,都需要判断是否存在token,若不存在,跳转至登录页。
- 前端之后的每一个对后端的请求都要在请求头上带上token,后端查看请求头是否有token,拿到token检查是否过期,返回对应状态给前端。
- 若token已过期,清除token信息,跳转至登录页。
登录页 -----Login.vue
<template> <!-- 登录 --> <div> <el-container> <el-main> <div class="box"> <el-form :model="user" :rules="rules" ref="user" label-width="100px" class="demo-ruleForm" > <el-form-item label="用户名" prop="email"> <el-input v-model="user.email"></el-input> </el-form-item> <el-form-item label="密码" prop="pass"> <el-input type="password" v-model="user.password"></el-input> </el-form-item> <el-form-item> <el-button type="primary" @click="login">登录</el-button> </el-form-item> </el-form> </div> </el-main> </el-container> </div> </template> <script> import {LoginPostData} from '../../api/index' // 后端登录接口 export default { data() { return { rules: { email: [ { required: true, message: "请输入用户名", trigger: "blur" }, { min: 3, max: 20, message: "长度在 3 到 20 个字符", trigger: "blur" }, ], password: [ { required: true, message: "请输入密码", trigger: "blur" }, { min: 3, max: 5, message: "长度在 3 到 5 个字符", trigger: "blur" }, ], }, user:{ email:'', password:'' }, userToken:'', // 用于存储从后台获取的token }; }, methods:{ login(){ // 登录接口 LoginPostData(this.user.email,this.user.password) .then((res)=>{ // 将token存到userToken中 this.userToken = res.data.data.token // 将token本地存储到回话中 localStorage.setItem('token', this.userToken); // 如果code为200则跳转到NewReport页面 if(res.data.code === 200){ this.$router.push({name:'NewReport'}) this.$message({ message: '恭喜你,登录成功', type: 'success' }); }else{ this.$message.error(res.data.data); } }) .catch(err=>{ console.log(err); }) } }, }; </script>
路由守卫 ----- router/index.js
import Vue from 'vue' import VueRouter from 'vue-router' Vue.use(VueRouter) const routes = [ // 登录页 { path: '/', name: 'Login', component: ()=>import('../views/Login/Login.vue'), }, // 首页 { path: '/Home', name: 'Home', component: ()=>import('../views/Home/Home.vue'), children:[ // 新建报表 { path:'/Home/NewReport', name:'NewReport', component:()=>import('../views/Home/NewReport.vue') }, ] }, ] const router = new VueRouter({ routes }) // 导航守卫 // 使用 router.beforeEach 注册一个全局前置守卫,判断用户是否登陆 router.beforeEach((to, from, next) => { //如果去往登录页则放行 if (to.path === '/') { next(); } else { // 从本地存储里获取token let token = localStorage.getItem('token'); // 判断token是否为空如果为空则跳转到登录页 如果有则放行 if (token === null || token === '') { next({path:'/'}); } else { next(); } } }); export default router
封装axios 添加请求拦截器 在每次请求之前进行的操作
- 在请求头中添加token ---- api/request.js
// 请求 import axios from 'axios' // create an axios instance 创建axios实例 const instance = axios.create({ baseURL: 'http://192.168.3.6:8082', // api 的 base_url withCredentials: false//跨域时使用凭证,默认带上cookies // timeout: 2000, // request timeout 设置请求超时时间 }) // 添加请求拦截器,在请求头中加token instance.interceptors.request.use( config => { //判断token是否存在 if (localStorage.getItem('token')) { // 在请求头中添加token config.headers.token = localStorage.getItem('token'); } return config; }, error => { return Promise.reject(error); }); export default instance
注意:
鬼知道我当时为了这个找了多半天 哭死home页面
<template> <div> <el-link icon="el-icon-switch-button" @click="tuichu">退出登录</el-link> </div> </template> <script> export default { methods: { // 退出 tuichu() { //退出登录,清空token localStorage.removeItem('token'); this.$router.push({ name: "Login" }); }, }, }; </script>
-
vue拦截器实现统一token,并兼容IE9验证功能
2020-12-11 23:24:14这里分享使用vue自带拦截器,给每次请求的头部添加token,而且兼容了IE9。 import axios from 'axios'; // 这里的config包含每次请求的内容,在这里把token放到请求头 axios.interceptors.request.use(function ... -
Vue axios请求头设置参数token验证权限
2020-12-23 01:40:40let token =localStorage.getItem('token') if (token) { config.headers.common['token'] =localStorage.getItem('token'); } return config }, err => { return Promise.reject(err); } ) 2 登录的时候把Token ... -
vue发送服务器请求和token验证
2020-03-13 18:10:36vue发送服务器请求和token验证 之前我们已经提到了token验证,现在我们通过vue搭建的项目中也必不可少的需要向服务器请求数据,类似react,我们还是使用axios来做服务请求的发送。 关于axios的详细操作和文档可以... -
vue中通过请求头发送token到后端接收验证(解决拦截器中获取请求头信息为null,解决跨域)
2022-04-22 10:34:22在给项目中增加jwt的token验证的时候(将token放在请求头中),后端获取不到我在前端请求头中封装好的token信息,为了解决这个问题,查阅了许多资料,在解决问题的过程中也遇到了许多新的问题,接下来就跟大家一一... -
vue登录注册及token验证实现代码
2020-11-27 07:46:09在大多数网站中,实现登录注册都是结合本地存储cookie、localStorage和请求时验证token等技术。而对于某些功能页面,会尝试获取本地存储中的token进行判断,存在则可进入,否则跳到登录页或弹出登录框。 而在vue单页... -
通过axios拦截器添加token验证,Vue添加全局请求头token
2021-09-15 19:12:59那意思就是之后所有的请求,我们都需要添加一个请求头,这样太麻烦了 能不能一次性添加? 可以的通过请求拦截器 拦截器介绍 - 这个config对象中有请求头,通过headers获取 具体如下添加 axios.interceptors.... -
详解vue项目中使用token的身份验证的简单实践
2021-01-19 20:05:19服务器端,进行对token的验证, 通过的话, 进行相应的增删改查操作, 并将数据返回给前端 为通过则返回错误码, 提示保错信息, 然后跳转到登录页. 具体步骤 所用技术: vuex + axios + localStorage + vue-router 1、... -
VUE实现token登录验证
2019-04-01 17:47:14实现这个登录功能的过程真是一波三折,中途出现了bug,整了两三天才解决了问题,心力交瘁,简直一个...现在详细地记录一下实现token登录验证的步骤,以防以后再犯错 1.封装store对token的操作方法 首先在src目录下... -
springboot+vue3.0+token 安全验证
2021-08-23 11:52:17springboot+vue+token安全验证目录一、说明二、后台(springboot)1、添加依赖包2、添加token工具类3、创建拦截器4、入口拦截5、配置跨域6、登录接口三、前端(vue)1、src目录下创建store文件夹2、添加路由守卫3、... -
vue中封装ajax请求,并且拦截请求在请求头中添加token
2021-08-06 07:22:55/*** 封装请求方法* @param {Object} url 接口请求地址* @param {Object} data 接口请求参数(无需请求方式参数,则此项可以为空,否则必须传)* @param {Object} params 请求方式参数(可以为空)*/function ajax(url, ... -
Vue:全局拦截所有请求,并在请求头中添加token
2020-12-04 19:10:04在实际的项目中,为了登录的安全,token是必不可少的,所以就需要前后端配合,后端生成和验证token(这方面我也写过博客,讲述后端对token的处理),前端在每一次请求中都要在请求头上加上token。 第一步,先不急,... -
vue中token登录验证,页面刷新导致token失效的解决办法
2021-11-02 20:34:52第一步:在store下的index.js文件夹中给状态管理添加token字段,如下所示 第二步:在需要进行判断的页面获取状态中token字段判断,是否有值从而判断登录状态。 第三步:在App组件中监听页面的刷新,一旦刷新就... -
Vue - axios 添加拦截器,配置请求头,添加 token 验证
2021-05-19 15:09:13axios 添加拦截器,配置请求头,添加 token 验证一. 配置 axios1. static 文件夹中创建一个 api 文件夹,api 文件中创建一个 http.js 文件2. 配置 http.js 文件3. main.js 中引入 http.js 文件二. 组件中发送接口... -
vue的token刷新处理的方法
2021-01-21 12:01:16客户端登录请求成功后,服务器将用户信息(如用户id)使用特殊算法加密后作为验证的标志发送给用户(即token),当用户下次发起请求时,会将这个token捎带过来,服务器再将这个token通过解密后进行验证,通过的话,... -
vue+node项目中使用token进行登录验证拦截
2021-03-21 17:21:35在vue+node项目中使用token进行登录...五、后台拦截前台的每次请求,进行验证token信息是否存在和正确。并且响应信息给前台。 六、前台根据后台的响应确定token是否正确,进行进一步操作(不正确,跳转至登录页面)。 -
vue之axios token 响应拦截请求
2022-03-09 17:03:39vue之axios token 响应拦截请求 import axios from 'axios'; import router from './router' import { Message } from 'element-ui'; //vue中引用NProgress加载进度条 import NProgress from 'nprogress' import '... -
vue登录拦截及token验证
2020-09-05 20:10:27https://www.cnblogs.com/web-record/p/9876916.html -
vue 基于vuex 请求令牌token 刷新令牌token验证
2020-04-29 08:32:24import Vue from "vue" import Vuex from "vuex" /** Vuex持久化存储之vuex-persist Vuex 解决了多视图之间的数据共享问题。但是运用过程中又带来了一个新的问题是, Vuex 的状态存储并不能持久化。也就是说当你...