精华内容
下载资源
问答
  • Vue中登录成功保存token,并每次请求携带并验证token
    千次阅读
    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中,可以用**Storage(sessionStorage,localStorage)**来存储token,也可以用vuex来存储(但要考虑页面刷新数据消失问题,可以在vuex用Storage), 下面介绍用localStorage来存储: 在登录请求成功后,会返回...
  • 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是否存在的简单实现,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
  • 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也返回401

    ps: 设置全局响应结果,拦截状态码为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:35
    token可用于登录验证和权限管理。...前端之后的每一个对后端的请求都要在请求头上带上token,后端查看请求头是否有token,拿到token检查是否过期,返回对应状态给前端。 若token已过期,清除token信息,跳转至登录

    token可用于登录验证和权限管理。

    大致步骤分为:

    1. 前端登录,post用户名和密码到后端。
    2. 后端验证用户名和密码,若通过,生成一个token返回给前端。
    3. 前端拿到token存储到localStorage管理,登录成功进入首页。
    4. 之后前端每一次权限操作如跳转路由,都需要判断是否存在token,若不存在,跳转至登录页。
    5. 前端之后的每一个对后端的请求都要在请求头上带上token,后端查看请求头是否有token,拿到token检查是否过期,返回对应状态给前端。
    6. 若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。 import axios from 'axios'; // 这里的config包含每次请求的内容,在这里把token放到请求头 axios.interceptors.request.use(function ...
  • let token =localStorage.getItem('token') if (token) { config.headers.common['token'] =localStorage.getItem('token'); } return config }, err => { return Promise.reject(err); } ) 2 登录的时候把Token ...
  • vue发送服务器请求token验证 之前我们已经提到了token验证,现在我们通过vue搭建的项目中也必不可少的需要向服务器请求数据,类似react,我们还是使用axios来做服务请求的发送。 关于axios的详细操作和文档可以...
  • 在给项目中增加jwt的token验证的时候(将token放在请求头中),后端获取不到我在前端请求头中封装好的token信息,为了解决这个问题,查阅了许多资料,在解决问题的过程中也遇到了许多新的问题,接下来就跟大家一一...
  • 在大多数网站中,实现登录注册是结合本地存储cookie、localStorage和请求验证token等技术。而对于某些功能页面,会尝试获取本地存储中的token进行判断,存在则可进入,否则跳到登录页或弹出登录框。 而在vue单页...
  • 那意思就是之后所有的请求,我们需要添加一个请求头,这样太麻烦了 能不能一次性添加? 可以的通过请求拦截器 拦截器介绍 - 这个config对象中有请求头,通过headers获取 具体如下添加 axios.interceptors....
  • 服务器端,进行对token验证, 通过的话, 进行相应的增删改查操作, 并将数据返回给前端 为通过则返回错误码, 提示保错信息, 然后跳转到登录页. 具体步骤 所用技术: vuex + axios + localStorage + vue-router 1、...
  • VUE实现token登录验证

    千次阅读 多人点赞 2019-04-01 17:47:14
    实现这个登录功能的过程真是一波三折,中途出现了bug,整了两三天才解决了问题,心力交瘁,简直一个...现在详细地记录一下实现token登录验证的步骤,以防以后再犯错 1.封装store对token的操作方法 首先在src目录下...
  • springboot+vue+token安全验证目录一、说明二、后台(springboot)1、添加依赖包2、添加token工具类3、创建拦截器4、入口拦截5、配置跨域6、登录接口三、前端(vue)1、src目录下创建store文件夹2、添加路由守卫3、...
  • /*** 封装请求方法* @param {Object} url 接口请求地址* @param {Object} data 接口请求参数(无需请求方式参数,则此项可以为空,否则必须传)* @param {Object} params 请求方式参数(可以为空)*/function ajax(url, ...
  • 在实际的项目中,为了登录的安全,token是必不可少的,所以就需要前后端配合,后端生成和验证token(这方面我也写过博客,讲述后端对token的处理),前端在每一次请求中都要在请求头上加上token。 第一步,先不急,...
  • 第一步:在store下的index.js文件夹中给状态管理添加token字段,如下所示 第二步:在需要进行判断的页面获取状态中token字段判断,是否有值从而判断登录状态。 第三步:在App组件中监听页面的刷新,一旦刷新就...
  • axios 添加拦截器,配置请求头,添加 token 验证一. 配置 axios1. static 文件夹中创建一个 api 文件夹,api 文件中创建一个 http.js 文件2. 配置 http.js 文件3. main.js 中引入 http.js 文件二. 组件中发送接口...
  • 客户端登录请求成功后,服务器将用户信息(如用户id)使用特殊算法加密后作为验证的标志发送给用户(即token),当用户下次发起请求时,会将这个token捎带过来,服务器再将这个token通过解密后进行验证,通过的话,...
  • vue+node项目中使用token进行登录...五、后台拦截前台的每次请求,进行验证token信息是否存在和正确。并且响应信息给前台。 六、前台根据后台的响应确定token是否正确,进行进一步操作(不正确,跳转至登录页面)。
  • vue之axios token 响应拦截请求 import axios from 'axios'; import router from './router' import { Message } from 'element-ui'; //vue中引用NProgress加载进度条 import NProgress from 'nprogress' import '...
  • https://www.cnblogs.com/web-record/p/9876916.html
  • import Vue from "vue" import Vuex from "vuex" /** Vuex持久化存储之vuex-persist Vuex 解决了多视图之间的数据共享问题。但是运用过程中又带来了一个新的问题是, Vuex 的状态存储并不能持久化。也就是说当你...

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 10,201
精华内容 4,080
关键字:

vue每次请求都验证token