精华内容
下载资源
问答
  • Vue 使用 token

    2020-09-02 21:09:28
    vue 解析 token 引入jwt-decode 包 npm install jwt-decode --save 在 vue 中引入jwt-decode import jwtDecode from ‘jwt-decode’ js 中使用 const decode = jwtDecode(token); console.log(decode);//解析后的...
    • vue 解析 token
    1. 引入jwt-decode 包
    npm install jwt-decode --save
    
    1. 在 vue 中引入jwt-decode
    import jwtDecode from 'jwt-decode'
    
    1. js 中使用
    const decode =  jwtDecode(token);
    console.log(decode);//解析后的对象
    

    vue-resource 设置请求头,带上token
    第一种方法:全局改变

      Vue.http.headers.common['token'] = token;
    

    第二种方法:在Vue实例中设置

     var vm = new Vue({
        el:'#app',
        http: {
          root: '/',
          headers: {
            token: token
          }
        }
      })
    

    第三种方法:在拦截器中设置 vue interceptors 设置请求头

      Vue.http.interceptors.push((request, next) => {
          request.headers.set('token', token); //setting request.headers
          next((response) => {
            return response
         })
      })
    

    第四种方法:在main.js添加过滤器

     Vue.http.interceptors.push((request,next)=>{
       //request.credentials = true; // 接口每次请求会跨域携带cookie
       //request.method= 'POST'; // 请求方式(get,post)
       //request.headers.set('token','111') // 请求headers携带参数
       
       next(function(response){
        return response;
       });
      })
    

    参考博客:

    • https://www.cnblogs.com/ifannie/p/11046835.html
    • https://blog.csdn.net/weixin_42398560/article/details/88794882
    展开全文
  • (3)前端将token保存在本地中, 建议使用localstorage进行保存. 下次对服务器发送请求时, 带上本地存储的token (4)服务器端,进行对token的验证, 通过的话, 进行相应的增删改查操作, 并将数据返回给前端 (5)为...

    原理:
    (1)前端页面进行登录操作, 将用户名与密码发给服务器;
    (2)服务器进行效验, 通过后生成token, 包含信息有密钥, uid, 过期时间, 一些随机算法等 ,然后返回给前端
    (3)前端将token保存在本地中, 建议使用localstorage进行保存. 下次对服务器发送请求时, 带上本地存储的token
    (4)服务器端,进行对token的验证, 通过的话, 进行相应的增删改查操作, 并将数据返回给前端
    (5)为通过则返回错误码, 提示保错信息, 然后跳转到登录页.

    技术:
    vuex + axios + localStorage + vue-router

    在前后端完全分离的情况下,Vue项目中实现token验证大致思路如下:

    1、第一次登录的时候,前端调后端的登陆接口,发送用户名和密码

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

    3、前端拿到token,将token存储到localStorage和vuex中,并跳转路由页面

    4、前端每次跳转路由,就判断 localStroage 中有无 token ,没有就跳转到登录页面,有则跳转到对应路由页面

    5、每次调后端接口,都要在请求头中加token

    6、后端判断请求头中有无token,有token,就拿到token并验证token,验证成功就返回数据,验证失败(例如:token过期)就返回401,请求头中没有token也返回401

    7、如果前端拿到状态码为401,就清除token信息并跳转到登录页面

    vue-cli搭建一个项目,简单说明前端要做的事:

    在这里插入图片描述

    一、调登录接口成功,在回调函数中将token存储到localStorage和vuex中

    login.vue

    <template>
      <div>
        <input type="text" v-model="loginForm.username" placeholder="用户名"/>
        <input type="text" v-model="loginForm.password" placeholder="密码"/>
        <button @click="login">登录</button>
      </div>
    </template>
     
    <script>
    import { mapMutations } from 'vuex';
    export default {
      data () {
        return {
          loginForm: {
            username: '',
            password: ''
          }
        };
      },
     
      methods: {
        ...mapMutations(['changeLogin']),
        login () {
          let _this = this;
          if (this.loginForm.username === '' || this.loginForm.password === '') {
            alert('账号或密码不能为空');
          } else {
            this.axios({
              method: 'post',
              url: '/user/login',
              data: _this.loginForm
            }).then(res => {
              console.log(res.data);
              _this.userToken = 'Bearer ' + res.data.data.body.token;
              // 将用户token保存到vuex中
              _this.changeLogin({ Authorization: _this.userToken });
              _this.$router.push('/home');
              alert('登陆成功');
            }).catch(error => {
              alert('账号或密码错误');
              console.log(error);
            });
          }
        }
      }
    };
    </script>
    

    在这里插入图片描述

    store文件夹下的index.js

    import Vue from 'vue';
    import Vuex from 'vuex';
    Vue.use(Vuex);
     
    const store = new Vuex.Store({
     
      state: {
        // 存储token
        Authorization: localStorage.getItem('Authorization') ? localStorage.getItem('Authorization') : ''
      },
     
      mutations: {
        // 修改token,并将token存入localStorage
        changeLogin (state, user) {
          state.Authorization = user.Authorization;
          localStorage.setItem('Authorization', user.Authorization);
        }
      }
    });
     
    export default store;
    

    二、路由导航守卫

    router文件夹下的index.js

    import Vue from 'vue';
    import Router from 'vue-router';
    import login from '@/components/login';
    import home from '@/components/home';
     
    Vue.use(Router);
     
    const router = new Router({
      routes: [
        {
          path: '/',
          redirect: '/login'
        },
        {
          path: '/login',
          name: 'login',
          component: login
        },
        {
          path: '/home',
          name: 'home',
          component: home
        }
      ]
    });
     
    // 导航守卫
    // 使用 router.beforeEach 注册一个全局前置守卫,判断用户是否登陆
    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;
    

    三、请求头加token

    // 添加请求拦截器,在请求头中加token
    axios.interceptors.request.use(
      config => {
        if (localStorage.getItem('Authorization')) {
          config.headers.Authorization = localStorage.getItem('Authorization');
        }
     
        return config;
      },
      error => {
        return Promise.reject(error);
      }
    );
    

    四、如果前端拿到状态码为401,就清除token信息并跳转到登录页面

    localStorage.removeItem('Authorization');
    this.$router.push('/login');
    
    展开全文
  • vue使用token进行身份验证和会话保持

    千次阅读 2019-03-19 00:13:52
    工具:vue + nodejs(express) 简单的说一下思路,如果demo中有错误或者考虑不周全的地方希望各位指出共同进步。 在登陆之后在我们的node.js服务器上使用md5将session与userID...客户端使用sessionStorage将token的...

    工具:vue + nodejs(express)

    简单的说一下思路,如果demo中有错误或者考虑不周全的地方希望各位指出共同进步。

    在登陆之后在我们的node.js服务器上使用md5将session与userID进行加密。将加密后的值token存储在session中,并且将userID保存在session中。然后将token的值返回给客户端。客户端使用sessionStorage将token的值存储。当跳转的目标路由需要登陆验证的时候,发出验证请求。如果有效,则next()跳转到目标路由。否则,跳转到login路由。

    那么,现在开始demo。

     

    1.登陆成功,vue使用session Storage保存token

     

    注意:axios请求需要在config目录下的index.js中配置服务器代理

    参考:vue-cli配置服务器代理

    login: function () {
        this.axios.post('api/user/login', {    //vue axios发出请求
                userID: this.userID,
                userPwd: this.userPwd
        })
          .then( res => {                      //注册回调函数  
            if (res.data.err === 'ok') {
                sessionStorage.token = res.data.token    //将返回的token储存在sessionStorage里面
            }
        })
    }
    

    2,登陆成功,nodejs将session与userID用md5加密生成token。

     

    首先我们要先下载crypto

    npm install crypto

     

    然后在我们的LoginController.js里面引入

    const crypto = require('crypto')
    var md5 = crypto.createHash('md5')
    
    module.exports = {
        login: function (req, res) {
            let u_id = req.body.userID    //用户登陆账号
                u_pwd =req.body.userPwd   //用户登录密码
                token = ''                //token值
            //数据库查询操作
    
            function callback (err, data) {    //执行数据库操作的回调函数
    
                //如果报错或没有查询结果则登陆失败
                if(err || data.length === 0) res.send({err: 'fail'})    
                else {
                    req.session.userID = params[0]
                    req.session.userPwd = params[1]
                    token = md5.update(req.session.userID + req.session).digest('hex')
                    req.session.token = token //根据具体情况存放token。此处只是一个demo
                    res.send({
                        err: 'OK',
                        token: token,
                        ...
                    })
                }
            }
        }
    }

    3.全局前置守卫-----访问控制

    在全局前置守卫应该对需要身份验证的路由页面进行验证。参照:

    vue路由元信息

    vue全局前置守卫

    我这里对所有页面进行身份验证

    main.js:

    router.beforeEach((to, from, next) => {
    
      //发出请求,并且将token以参数形式传递给nodejs服务器
      axios.post('/api/user/checkLogin', { 
        token: sessionStorage.getItem('token') || ''    //如果没有token则为空字符串
      })
        .then(res => {
    
          // 如果没有返回数据则跳转到登陆页面
          if (res.data.err === 'fail') router.push('/login')
          next()
        })
    })

    4.nodejs-----登陆验证

    LoginController.js:

    module.exports = {
        ...,
        checkLogin: function (req, res) {
            let userID = req.session.userID
                token = req.body.token    //获取到请求的token
    
            //将参数中的token与session中的userID加密后得到的值与session中的值比较
            //如果相等,则说明身份有效
            if (req.session.token === md5.update(userID + token).digest('hex'))
                res.send({err: 'OK'})
            
            //不匹配身份失效
            else res.send({err: 'fail'})
        }
    }

    以上就是一个小demo,意在于对token的身份验证有个初步的了解。肯定有不完善的地方,希望各位各位指出,谢谢

    展开全文
  • vue获取token 实现token登录

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

    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(()=>{})
    }
    
    展开全文
  • vuetoken使用

    2020-09-25 16:05:34
    使用vuex与sessionStorage结合存储token state代码: var state = { token:window.sessionStorage.getItem("token")?window.sessionStorage.getItem("token"):""; } getters代码: var getters = { getToken...
  • 关于Vuetoken使用

    2019-12-26 12:03:03
    1.token的获取。 在login页面中通过登录获取token <template> <div class="login"> <div class="wrap" id="wrap"> <div class="logGet"> <!-- 头部提示信息 --> <...
  • 现结合个人开发实践分享一下使用vue axios请求拦截的方法来刷新token和判断token是否过期、失效的方法。 刷新tokentoken是否过期的操作都是由后端实现,前端只负责根据code的不同状态来做不同的操作: 一、判断...
  • 令牌将随您使用vue-resource插件发出的每个请求一起存储在Authorization标头中。 npm install vue-token --save 用法 import Auth from "vue-token"; Vue.use(Auth, options); 选项 { loginUrl: "/api/login", ...
  • vuetoken

    2019-08-20 14:56:17
    Token 使用: 下载 npm install --save jsonwebtoken 并且引用 在登录成功之后创建一个token 并且把这个token 发送给前端 前端使用相应的技术保存起来(cookie 本地存储) //启动服务 var express = require(...
  • 客户端登录请求成功后,服务器将用户信息(如用户id)使用特殊算法加密后作为验证的标志发送给用户(即token),当用户下次发起请求时,会将这个token捎带过来,服务器再将这个token通过解密后进行验证,通过的话,...
  • 关于vuetoken的保存和使用

    千次阅读 2020-02-21 23:01:33
    前端添加请求拦截器 import Vue from 'vue'; import axios from 'axios'; Vue.prototype.$axios = axios // axios.defaults.baseURL = '... axios.defaults.headers.common['token'] =sessionStorage...

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 1,413
精华内容 565
关键字:

vue使用token

vue 订阅