精华内容
下载资源
问答
  • ③ 客户端拿到返回的token值将其保存在本地(如cookie/local storage),作为公共参数,以后每次请求服务器时携带该token(放在响应头里),提交给服务器进行校验 ④ 服务器接收到请求后,首先验证是否携带token,...

    Vue项目中实现token验证大致思路如下:

    其过程大致如下:
    ① 用户首次登录,将输入的账号和密码提交给服务器

    ② 服务器对输入内容进行校验,若账号和密码匹配则验证通过,登录成功,并生成一个token值,将其保存到数据库,并返回给客户端

    ③ 客户端拿到返回的token值将其保存在本地(如cookie/local storage),作为公共参数,以后每次请求服务器时都携带该token(放在响应头里),提交给服务器进行校验

    ④ 服务器接收到请求后,首先验证是否携带token,若携带则取出请求头里的token值与数据库存储的token进行匹配校验,若token值相同则登录成功,且当前正处于登录状态,此时正常返回数据,让app显示数据;若不存在或两个值不一致,则说明原来的登录已经失效,此时返回错误状态码,提示用户跳转至登录界面重新登录

    ⑤ 注意:用户每进行一次登录,登录成功后服务器都会更新一个token新值返回给客户端

    第一步,创建组件

    Login.vue

     <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>
    
    
    -----------------------------------------------------------------------------------------------------------------------
    
    ## 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 注册一个全局前置守卫,判断用户是否登陆
    javascript
    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;
    
    
    
    
    展开全文
  • 继上篇实现Auth认证之后,然后每个跳转页面都会在后端验证token的存在 然后那天晚上通过模仿Auth发送请求,发送成功(上篇末尾的方式) 但是今天再继续写,发现每个页面请求都要发送token验证 就比较麻烦了 这时候又要...

    继上篇实现Auth认证之后,然后每个跳转页面都会在后端验证token的存在

    然后那天晚上通过模仿Auth发送请求,发送成功(上篇末尾的方式)
    但是今天再继续写,发现每个页面请求都要发送token验证
    就比较麻烦了

    这时候又要axios上场了
    可以通过axios类似error拦截的方式拦截http request请求
    这样每次request都可以默认加上token
    (当然前提已经在session里存储了你的token验证字符串)

    // main.js文件
    // http request 拦截器
    axios.interceptors.request.use(
      config => {
        var token = sessionStorage.getItem('token');
        if (token) {  // 判断是否存在token,如果存在的话,则每个http header都加上token
          token =sessionStorage.getItem('token')+':';
          config.headers.Authorization = `Basic ${new Buffer(token).toString('base64')}`;
        }
        return config;
      },
      err => {
        return Promise.reject(err);
      });

    为什么要加":"?
    这里一开始我并没有加冒号,然后发现新加的request页面显示401
    但是消息头里明明加上了Authorization,细看的话发现这个token和另外几个页面的不同
    (因为另外几个页面的token是那天晚上的方式通过axios直接发送的)
    解码正确的token发现是缺少冒号,具体原因不是很清楚
    查看文档似乎发现了一个合理的解释(不知道是否正确)
    文档中写到:

    新版的 verify_password 回调函数会尝试认证两次。首先它会把 username 参数作为令牌进行认证。如果没有验证通过的话,就会像基于密码认证的一样,验证username和password
    然后文档curl例子类似下面的格式

    $ curl -u eyJhbGciOiJIUzI1NiIsImV4cCI6MTM4NTY2OTY1NSwiaWF0IjoxMzg1NjY5MDU1fQ.eyJpZCI6MX0.XbOEFJkhjHJ5uRINh2JA1BPzXjSohKYDRT472wGOvjc:unused -i -X GET http://127.0.0.1:5000/api/resource
    HTTP/1.0 200 OK
    Content-Type: application/json
    Content-Length: 30
    Server: Werkzeug/0.9.4 Python/2.7.3
    Date: Thu, 28 Nov 2013 20:05:08 GMT
    
    {
      "data": "Hello, miguel!"
    }

    我们会看到这个 token:unused 的格式
    然后request时会加上冒号

    转载于:https://www.cnblogs.com/bay1/p/10982379.html

    展开全文
  • vue token验证

    2020-08-26 22:30:57
    vue token验证 在前后端完全分离的情况下,Vue项目中实现token验证大致思路如下: ...2、后端收到请求验证用户名和密码,验证成功,就给前端返回一个token ...5、每次调后端接口,要在请求头中加token 6、后端判断

    vue token验证

    在前后端完全分离的情况下,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信息并跳转到登录页面
    1234567

    ① 调登录接口成功,在回调函数中将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: ''
          },
          userToken: ''
        };
      },
     
      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 = res.data.data.body.token;
              // 将用户token保存到vuex中
              _this.changeLogin({ token: _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
        token: localStorage.getItem('token') ? localStorage.getItem('token') : ''
      },
     
      mutations: {
        // 修改token,并将token存入localStorage
        changeLogin (state, user) {
          state.token = user.token;
          localStorage.setItem('token', user.token);
        }
      }
    });
     
    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('token');
     
        if (token === null || token === '') {
          next('/login');
        } else {
          next();
        }
      }
    });
     
    export default router;
    
    

    ④ 请求头token

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

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

      localStorage.removeItem('token');
      this.$router.push('/login');
    

    流程图:
    在这里插入图片描述

    展开全文
  • vuetoken验证登录

    2019-10-02 15:31:49
    // 在请求拦截器(request)中设置每次请求都携带token axios.interceptors.request.use(function (config) { // 在请求之前验证token,是否有token或者过期 let myToken = window.localStorage.ge...
    // 首次登录获取token存储在localStorage或者vueX中
    // 在请求拦截器(request)中设置每次请求都携带token
    axios.interceptors.request.use(function (config) {
        // 在请求之前验证token,是否有token或者过期
        let myToken = window.localStorage.getItem('token')
        if (token) {
            axios.defaults.headers.common['Authorization'] = myToken
        } else {
            this.$router.replace({
                // 跳转登录页
                path: '/login',
                // 存储路径,登录成功跳转
                query: {redirect: this.$router.currentRoute.fullPath}
            })
        }
        return config
    }, function (error) {
        // 对错误进行判断
        // 如果返回401,则跳转到登录页
        switch (error.response.status) {
            case 401:
                this.$router.replace({
                    path: '/login',
                    query: {redirect: this.$router.currentRoute.fullPath}
                })
        }
        return Promise.reject(error)
    })
        
    // 通过路由守卫来判断当前路由页面是否需要某种条件限制
    router.beforeEach(to, from, next) {
        // 判断是否限制
        if (to.meta.requiresAuth) {
            // 判断token
            if (token) {
                
            } else {
                
            }
        } else {
            next()
        }
    }

    转载于:https://www.cnblogs.com/zjh-study/p/10647049.html

    展开全文
  • 在前后端完全分离的情况下,Vue项目中实现token验证大致思路如下: ...2、后端收到请求验证用户名和密码,验证成功,就给前端返回一个token...5、每次调后端接口,要在请求头中加token 6、后端判断请求头中有无token
  • 在前后端完全分离的情况下,Vue项目中实现token验证大致思路如下:1、第一次登录的时候,前端调后端的登陆接口,发送用户名和密码2、后端收到请求验证用户名和密码,验证成功,就给前端返回一个token3、前端拿到...
  • 一、Vue实现token验证思路逻辑 第一次登录的时候,前端调后端的登陆接口,发送用户名和密码 后端收到请求验证用户名和密码,验证成功,就给前端返回一个token 前端拿到token,将token存储到localStorage和vuex中...
  • Vue 项目实现用户登录及token验证 在前后端完全分离的情况下,Vue 项目中实现token验证大致思路如下: ...后端收到请求验证用户名和密码,验证成功,就给前端返回一个token ...每次调后端接口,要在请求头中加 token
  • vue+axios请求时设置请求头(带上token

    万次阅读 多人点赞 2018-11-06 09:57:21
    但是跳转到其他页面时没有token,会报错undefined,所以每次请求都要带上token值。(每次跳页面, 都要获取新路由对应的html页面, 这时候可以用axios的http拦截每次路由跳转, 都先让后台验证一下...
  • 在前后端完全分离的情况下,Vue项目中实现token验证大致思路如下: ...2、后端收到请求验证用户名和密码,验证成功,就给前端返回一个token...5、每次调后端接口,要在请求头中加token 6、后端判断请求头中有无token
  • 在前后端完全分离的情况下,Vue项目中实现token验证大致思路如下: ...2、后端收到请求验证用户名和密码,验证成功,就给前端返回一个token ...5、每次调后端接口,要在请求头中加token 6、后端判断请求头中有无token
  • vue-cli主要插件:axios应用场景:每次请求接口时,需要在headers添加对应的Token验证探索过程如下:在main.js中引入axios,主动请求一次签发Token的接口并设置到axios的默认headers中,以此达到后续的axios请求都带...
  • 1、第一次登录的时候,前端调后端的登陆接口,发送用户名和密码2、后端收到...就判断 localStroage 中有无 token ,没有就跳转到登录页面,有则跳转到对应路由页面5、每次调后端接口,要在请求头中加token6、后...
  • vue-cli主要插件:axios应用场景:每次请求接口时,需要在headers添加对应的Token验证探索过程如下:在main.js中引入axios,主动请求一次签发Token的接口并设置到axios的默认headers中,以此达到后续的axios请求都带...
  • 基本思路 用户登录校验成功后服务端会根据 用户信息和时间 生成token,并将其和用户的信息一起发送给客户端。...服务端每次接收请求验证token的有效性和时间是否过期,如无法验证通过,返回错误的信息给...
  • 在前后端完全分离的情况下,Vue项目中实现token验证大致思路如下: ...2、后端收到请求验证用户名和密码,验证成功,就给前端返回一个token...5、每次调后端接口,要在请求头中加token 6、后端判断请求头中有无token
  • vue-cli主要插件:axios应用场景:每次请求接口时,需要在headers添加对应的Token验证探索过程如下:在main.js中引入axios,主动请求一次签发Token的接口并设置到axios的默认headers中,以此达到后续的axios请求都带...
  • vue处理token

    2021-03-18 14:25:46
    前端每次在向后端发送请求时候请求头中加上token 携带oken的请求发送到后端,后端进行验证,成功返回数据,如果token过期,返回401 前端接收到401时候,提示登录过期,跳转到登录页面,并将存储的token进行清除...
  • vuetoken的实现

    2021-02-23 20:40:27
    vue+token步骤 ...后端验证用户名和密码,若通过—— 后端利用java的JWT创建Token工具类,然后在对于的Controller向前端返回token...每次调后端接口,要在请求头中加token 后端判断请求头中有无token,有token,就拿到t
  • 之前使用django开发api接口时,约定是要每次请求都要带token这个参数,这样很不方便,最近学了vue,也使用了axios,发现在axios拦截器中可以设置每次请求头中增加一个Authorization属性,用它来自动携带token就很...
  • 前提参考:vue项目封装axios 思路: // 1, 前端校验,校验成功后向后台传用户名和密码(每次请求接口要传 token) ...// 3, 前端拿到token,...// 5, 后端判断请求头中有无token,有token,就拿到token并验证token,验
  • 3. 客户端储存token,一般都会存储在localStorage或者cookie里面(vue可以存储...4. 客户端每次请求时都带有token,可以将其放在请求头里,每次请求都携带token 5. 服务端验证token,所有需要校验身份的接口都会被校...
  • 前后端分离token验证

    2021-01-11 14:56:14
    实例环境 IDE 框架/脚手架 IDEA v2019.1.2 Spring boot 2+ - Vue cli 3+ 概述 ... 后端生成带有寿命的token->...前端除登录外每次请求api需要携带token头字段,为了方便操作,可以给数据请.
  • 使用场景 前后端完全分离,接口是...前端每次需要登录验证请求都需要带着token发送给后端 前端每次跳转页面,都会判断localStorage里是否存在token,无就返回到登录页面 …这里我是看的其他博主的文章,以下是连接 ...
  • 每次登录返回一个新的token <p>2、想给token一个有效期,需要前端给还是后端给?要怎么给?需要把这个token和有效期放数据库吗?除了这些还需要对它处理什么? 目前只把token存...
  • 在我们登陆以后,我们通常希望以后的每次url请求都带上认证信息,即让我们的服务器知道我们已经登陆。利用jwt(jsonWebToken)插件可以帮我们生成相应tokten const jwt = require('jsonwebtoken'); let expressJWT...
  • vue登录思路

    2020-06-19 23:54:43
    在前后端完全分离的情况下,Vue项目中实现token验证大致思路如下: ...2、后端收到请求验证用户名和密码,验证成功,就给前端返回一个token...5、每次调后端接口,要在请求头中加token 6、后端判断请求头中有无token
  • 在前后端完全分离的情况下,Vue项目中实现token验证大致思路如下: ...2、后端收到请求验证用户名和密码,验证成功,就给前端返回一个token...5、每次调后端接口,要在请求头中加token 6、后端判断请求头中有无token
  • 简介 demo在这里 ...-》客户端之后每次请求都要带该令牌 (一般是http的header的authorization) -》 服务端只需要验证该令牌 (签名是否正确,token是否过期,token的接收方是否是自己 等等) 验证ok就放

空空如也

空空如也

1 2 3
收藏数 43
精华内容 17
关键字:

vue每次请求都验证token

vue 订阅