精华内容
下载资源
问答
  • vue获取token登录的过程

    千次阅读 2020-03-09 22:26:31
    vue获取token登录的过程: 1,访问需要登录的页面的时候,利用路由守卫跳转,输入正确的用户名密码 向后台的认证接口发送数据 2,获取token 用vuex存储 ,且存储到localstorage中,token后台设置过期时间 3,和axios...

    vue获取token登录的过程:
    1,访问需要登录的页面的时候,利用路由守卫跳转,输入正确的用户名密码 向后台的认证接口发送数据
    2,获取token 用vuex存储 ,且存储到localstorage中,关闭页面,下次重新访问可不用登陆,直接从localstorage取值,token过期时间由后台控制
    3,axios 拦截 设置接下来的接口访问带着token;当token过期返回401跳转登陆重新获取token进行登录,
    废话不多说,下面直接上代码
    mian.js

    
    ```javascript
    export const instance = axios.create({
        timeout: 20000,
        validateStatus: function (status) {
            return status < 500
        },
        headers: {
            'Accept': 'application/json'
        },
    
    })
    instance.interceptors.response.use(
        response =>{
                switch (response.status) {
                    case 401:
                        router.replace({
                            path:'/login',
                            query:{redirect:router.currentRoute.fullPath}
                        })
                }
    
            return response
        },
        error => {
     
    展开全文
  • vue获取token 实现token登录

    千次阅读 2020-12-04 09:43:09
    vue实现token用户登录 使用token做登录验证的思路大致如下: 1、在第一次登录的时候前端调用后端的接口,把用户名和密码传给后端。 2、后端收到请求,验证用户名和密码,验证成功后,返回给前端一个token值。 3、...

    vue实现token用户登录

    使用token做登录验证的思路大致如下:

    1、在第一次登录的时候前端调用后端的接口,把用户名和密码传给后端。

    2、后端收到请求,验证用户名和密码,验证成功后,返回给前端一个token值。

    3、前端收到后端传给的token值,将token存储在本地 loaclStorage和vuex中。(本次项目用的是vue框架,使用了vuex全局状态管理)

    4、前端每次路由跳转,就判断localStorage中是否有token,如果没有就跳转登录页面,如果有就跳转到相应的页面。

    5、分装一公用的请求接口方法,每次请求调用后端接口,都在请求头中带上token

    6、后端判断请求头中是否有token,如果有token就拿到token并且验证token,验证成功返回数据,验证失败(例如token过期),就返回给前端一个状态码,一般是401,请求头中没有token也返回401 (第6步是后端做,前端只要根据后端返回都状态做相应都处理就行了)

    7、如果前端拿到后台返回都状态码是401,就清除token并跳转登录页面。

    实际步骤

    1、在项目中store中都store.js文件里添加保存和删除token都全局方法。

    //  store.js 中都mutation中增加添加和删除token的方法
    import Vue from 'vue'
    import Vuex from 'vuex'
    Vue.use(Vuex)
    
    const state = {     // 全局管理的数据存储
    	 isLogin:'0',
    	 ser:null,
    	 token:localStorage.getItem('token') ? localStorage.getItem('token'):'',   // token
    };
    export default new Vuex.Store({
    	state,
    	getters:{    // 监听数据变化的
    		getStorage(state){   // 获取本地存储的登录信息
    	      if(!state.token){
    	        state.token =JSON.parse(localStorage.getItem(key))
    	      }
    	      return state.token
    	    }
    	},
    	mutations:{
    		$_setToken(state, value) { // 设置存储token
    	        state.token = value;
    	        localStorage.setItem('token', value);
    	    },
    	    $_removeStorage(state, value){  // 删除token
    		      localStorage.removeItem('token');
    	    },
    	}
    })
    

    2、在登录页面(login.vue)中登录方法调用接口成功后把token存储在本地存储中localStorage。

    // login.vue页面
    methods:{
    	loginFun(){
    		this.$api.post('请求的后端接口链接',{
    				data:{
    					userId:this.user,   // 登录名
    		            userPwd:this.psw,  // 登录密码
    				}
    		}).then((res) => {
    			if(res.data.status == 200){
    				var userInfo = res.data.data;
    				this.$store.commit('$_setToken', userInfo.token);
    				Toast({ message: '登录成功', type: 'success',duration: 1500});   // ui弹窗提示
                     this.$router.push({ name:'homePage' })// 跳转到首页
    			} else {
    				Toast({ message: res.data.message, duration: 1500});   // ui弹窗提示
    			}
    		})
    	}
    }
    

    3、在main.js中添加请求拦截器,并在请求头中添加token。

    import Vue from 'vue'
    import App from './App.vue'
    import router from './router/router'
    import store from './store/store'
    
    import PublicFun from './utils/publicFun'    // 公用方法
    
    import './mintUi'   // 按需引入mintUi 组建   如需配置到mintUi.js去配置
    import '@/assets/mui/css/mui.css' // mui.css样式
    
    /*引入axios插件*/
    import axios from 'axios'
    Vue.prototype.$http = axios;
    
    // 全局路由构造函数,判断是否登录和要跳转到页面
    router.beforeEach((to, from, next) => {
      if (to.matched.some(m => m.meta.requireAuth)) {    // 需要登录
        if(window.localStorage.token && window.localStorage.isLogin === '1'){
          next()
        } else if (to.path !== '/login') {
          let token = window.localStorage.token;
          if (token === 'null' || token === '' || token === undefined){
              next({path: '/login'})
              Toast({ message: '检测到您还未登录,请登录后操作!', duration: 1500 })
          }
        } else {
          next()
        }
      } else {   // 不需要登录
        next()
      }
    })
    
    
    
    // 配置公共url
    Axios.defaults.baseURL = "http://www.sinya.online/api/"
    //添加请求拦截器
    axios.interceptors.request.use(
      config =>{
        if(store.state.token){
          config.headers.common['token'] =store.state.token
        }
        return config;
      },
      error =>{
        //对请求错误做什么
        return Promise.reject(error);
      })
    
    //http reponse响应拦截器
    axios.interceptors.response.use(
      response =>{
        return response;
      },
      error=>{
        if(error.response){
          switch(error.response.status){
            case 401:
              localStorage.removeItem('token');
              router.replace({
                path: '/views/login',
                query: {redirect: router.currentRoute.fullPath}//登录成功后跳入浏览的当前页面
              })
          }
        }
      })
    
    Vue.prototype.$publicFun = PublicFun   // 挂载全局公用方法
    Vue.prototype.$apps = Apps    //  app.js公用方法
    Vue.config.productionTip = false
    
    new Vue({
      router,
      store,
      render: h => h(App)
    }).$mount('#app')
    

    看到token
    在这里插入图片描述

    退出的时候

    returnFun(){   // 退出登录
    	 MessageBox.confirm(this.lang.logoutTip).then(action => {
    	     this.$store.commit('$_removeStorage');    // 清除登录信息
    	     this.$router.push({
    	         name:'login'
    	     });
    	     Toast({message:this.lang.logoutSuccess, duration: 1500});
    	 }).catch(()=>{})
    }
    
    展开全文
  • 获取token // 获取token login () { if (this.form.username == "" || this.form.password == "") { this.$message.warning("账号密码不能为空") } else { let params = { username: this.form.username, ...
    获取token
     // 获取token
        login () {
          if (this.form.username == "" || this.form.password == "") {
            this.$message.warning("账号密码不能为空")
          } else { 
            this.axios.post("/oauth/token", { { 
              username: this.form.username,
              password: this.form.password
            } }
            ).then(res => {
              if (res.status == "200" || res.status == 200) {
                sessionStorage.setItem('tokenId', res.data.access_token);  
                this.$router.push({ path: "/" });
              }
            }).catch(error => {
              console.log(error)
            })
          }
        },
    
    将token带入请求头中
    //将token带入请求头中
    axios.interceptors.request.use(function(config) {
        let token = sessionStorage.getItem('tokenId')
        if (token) { 
            config.headers['Authorization'] = 'Bearer' + token
        }
        return config
    }, function(error) {
        return Promise.reject(error)
    })
    
    响应拦截器
    axios.interceptors.response.use(function(response) { // ①10010 token过期(30天) ②10011 token无效
        // console.log(response)
        if (response.status == 200) {
            if (response.data.resultHint == "不允许访问") {
                Vue.prototype.$message.error('无权限操作,请联系管理员')
            }
        }
        return response
    }, function(error) { //登录失败异常
        console.log(error)
        if (error.request) {
            if (error.request.status == 401) {
                Vue.prototype.$message.error('未授权,请重新登录')
                router.replace({
                    path: '/login' // 到登录页重新获取token
                })
            } else if (error.request.status == 400) {
                Vue.prototype.$message.error('用户名或密码错误')
            }
        } else if (error.response) {
            console.log(error.response.data);
            console.log(error.response.status);
            console.log(error.response.headers);
        }
        return Promise.reject(error)
    })
    
    展开全文
  • vue中如何获取token,并将token写进header

    万次阅读 多人点赞 2018-03-15 16:12:25
    在login.vue中通过发送http请求获取token//根据api接口获取token var url = this.HOST + "/session"; this.$axios.post(url, { username: this.loginForm.username, password: this.loginForm.pa...
    需要准备的东西: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.data);
      this.$message.success('登录成功');
      let data = res.data;
      //根据store中set_token方法将token保存至localStorage/sessionStorage中,data["Authentication- 
      //Token"],获取token的value值
      this.$store.commit('set_token', data["Authentication-Token"]);
    
    if (this.$store.state.token) {
      this.$router.push('/')
    } else {
      this.$router.replace('/login');
    }
    
    }).catch(error => {
      // this.$message.error(error.status)
      this.loading = false
      this.loginBtn = "登录"
      this.$message.error('账号或密码错误');
      // console.log(error)
    })
    

     
     
    2.在store.js中对token状态进行监管
     
    import Vue from 'vue'
    import Vuex from 'vuex'
    
    
    Vue.use(Vuex)
    
    export default new Vuex.Store({
      state:{
        token:''
      },
      mutations:{
        set_token(state, token) {
            state.token = token
            sessionStorage.token = token
        },
        del_token(state) {
            state.token = ''
            sessionStorage.removeItem('token')
        }
       }
    })
    
     
    3.在router/index.js中
    import Vue from 'vue'
    import Router from 'vue-router'
    import store from './store'
    
    // 页面刷新时,重新赋值token
    if (sessionStorage.getItem('token')) {
        store.commit('set_token', sessionStorage.getItem('token'))
    }
    
    const router = new Router({
        mode: "history",
        routes
    });
    
    router.beforeEach((to, from, next) => {
      if (to.matched.some(r => r.meta.requireAuth)) {           //这里的requireAuth为路由中定义的                         
        meta:{requireAuth:true},// 意思为:该路由添加该字段,表示进入该路由需要登陆的
        if (store.state.token) {
            next();
        } else {
            next({
                path: '/login',
                query: {redirect: to.fullPath}
            })
        }
      } else {
        next();
      }
    })
    

     
     
     
     
     
    4.在main.js中定义全局默认配置:

     

    Axios.defaults.headers.common['Authentication-Token'] = store.state.token;
     
    5.在src/main.js添加拦截器,(先引入store.js)
     
    import Vue from 'vue'
    import Element from 'element-ui'
    import 'element-ui/lib/theme-chalk/index.css'
    import store from './store'
    import App from './App'
    import router from './router'
    import Axios from 'axios'
    
    // 添加请求拦截器
    Axios.interceptors.request.use(config => {
      // 在发送请求之前做些什么
      //判断是否存在token,如果存在将每个页面header都添加token
      if(store.state.token){
        config.headers.common['Authentication-Token']=store.state.token
      }
    
      return config;
    }, error => {
      // 对请求错误做些什么
      return Promise.reject(error);
    });
    
    // http response 拦截器
    Axios.interceptors.response.use(
    response => {
    
      return response;
    },
    error => {
    
    if (error.response) {
      switch (error.response.status) {
        case 401:
        this.$store.commit('del_token');
        router.replace({
          path: '/login',
          query: {redirect: router.currentRoute.fullPath}//登录成功后跳入浏览的当前页面
        })
        break
      }
    }
    return Promise.reject(error.response.data)
    });
    ------------------------------------------------------------------------------------
    ...................完成以上步骤就可以了..........................
    ------------------------------------------------------------------------------------

     

    展开全文
  • 主要介绍了Vue axios获取token临时令牌封装案例,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
  • 今天小编就为大家分享一篇在vue获取token,并将token写进header的方法,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
  • 在前后端完全分离的情况下,Vue项目中实现token验证大致思路如下: 1、第一次登录的时候,前端调后端的登陆接口,发送用户名和密码 2、后端收到请求,验证用户名和密码,验证成功,就给前端返回一个token 3、前端...
  • Vue登录token处理

    2020-05-26 15:18:08
    目录Vue登录token处理1. token获取2. token的保存3. token的携带 Vue登录token处理 1. token获取 一般用户登录后,从服务器端返回的数据中,包含有token,从服务器端返回的数据的结构一般如下 在这里插入代码...
  • vue刷新token方法

    千次阅读 2019-03-16 15:39:24
    这是在网上找到比较简单易懂的方法,大家可以借鉴 Vue刷新token,判断token是否过期、失效的最简便的方法 Vue刷新token,判断token是否过期
  • npm install vue-token --save 用法 import Auth from "vue-token"; Vue.use(Auth, options); 选项 { loginUrl: "/api/login", signupUrl: "/api/users", logoutUrl: "/api/logout", refresh: false // ...
  • 主要介绍了vuetoken刷新处理的方法,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
  • 主要介绍了基于vue 实现token验证的实例代码,非常不错,具有参考借鉴价值,需要的朋友可以参考下
  • 主要介绍了vue生成token并保存到本地存储中,本文给大家介绍的非常详细,具有一定的参考借鉴价值,需要的朋友可以参考下
  • vue+token验证

    千次阅读 2018-11-14 11:35:12
    vue-koa2-token 基于vue的 做了token验证 个人博客: 个人博客 前端部分(对axios设置Authorization) import axios from 'axios' import store from '../store' import router from '../router' //设置全局axios...
  • 基于vuetoken认证机制(完整版)

    万次阅读 多人点赞 2018-11-12 15:14:11
    这两天边学习vue边写了一个基于vuetoken认证机制,以前是用的Angular js,现在改成vue,感觉写起来更容易理解,编码也更方便了。不多说,以下为截图加代码:(注意要自己去安装axios、vuex),我用的element-UI做...
  • vue实现token用户登录

    万次阅读 多人点赞 2019-08-31 17:52:25
    最近公司新启动了个项目,用的是vue框架在做。趁着周末把项目中登录部分的实现总结下。 一、在前后端分离的情况下,使用token做登录验证的思路大致如下: 1、在第一次登录的时候前端调用后端的接口,把用户名和密码...
  • 本篇文章主要介绍了vue生成token保存在客户端localStorage中的方法,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
  • 现结合个人开发实践分享一下使用vue axios请求拦截的方法来刷新token和判断token是否过期、失效的方法。 刷新tokentoken是否过期的操作都是由后端实现,前端只负责根据code的不同状态来做不同的操作: 一、判断...
  • vue搭配element获取token登录校验

    千次阅读 2020-01-06 10:24:25
    Vue项目登录页面获取token验证 实现思路 1、第一次登录的时候,前端调后端的登陆接口,发送用户名和密码 2、后端收到请求,验证用户名和密码,验证成功,就给前端返回一个token 3、前端拿到token,将token存储到...
  • 第一种方法:定时刷新token import { calcDate } from '@/util/date.js' import { getStore } from '@/util/store.js' created() { //实时检测刷新token this.refreshToken() }, methods: { // 方法 ...
  • VUE实现token登录验证

    千次阅读 多人点赞 2019-04-01 17:47:14
    实现这个登录功能的过程真是一波三折,中途出现了bug,整了两三天才解决了问题,心力交瘁,简直一个...现在详细地记录一下实现token登录验证的步骤,以防以后再犯错 1.封装store对token的操作方法 首先在src目录下...
  • vue 解析token

    2020-05-26 12:01:03
    安装插件 npm install jwt-decode --save 需要用到的地方引入jwt-decode import jwtDecode from 'jwt-decode' 使用 const decode = jwtDecode(token); console.log(decode);
  • SpringBoot+vue+token

    2019-11-06 15:58:48
    文章目录前端token验证后端token验证(集成jwt) 前端 token验证 1、前端接受后台发过来的token,将其存入LocalStorage,并且在store.js中进行存储 state: { // 存储token Authorization: localStorage.getItem('...
  • vue+token验证实现登陆

    千次阅读 2018-11-14 11:33:32
    在前后端完全分离的情况下,Vue项目中实现token验证大致思路如下: 1、第一次登录的时候,前端调后端的登陆接口,发送用户名和密码 2、后端收到请求,验证用户名和密码,验证成功,就给前端返回一个token 3、前端拿...

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 38,295
精华内容 15,318
关键字:

vue怎么获取token

vue 订阅