VUE实现token登录验证

本文实例为大家分享了VUE实现token登录验证的具体代码,供大家参考,具体内容如下

实现这个登录功能的过程真是一波三折,中途出现了bug,整了两三天才解决了问题,心力交瘁,简直一个头两个大,感觉自己的毅力和耐心又提升了一个层次ORZ

好在最终在同学的帮助下解决了bug,不过我又再次感受到了作为一个菜鸟的浅薄,大佬的问题屡次触及到我的知识盲区......现在详细地记录一下实现token登录验证的步骤,以防以后再犯错

1.封装store对token的操作方法

首先在src目录下创建一个store文件夹,再创建一个main.js文件

main.js存放的代码作用是获取token的值和用localStorage存储、删除本地token的值

import Vue from 'vue';
import Vuex from 'vuex';

Vue.use(Vuex);

export default new Vuex.Store({
  state: {
    token: localStorage.getItem('token') ? localStorage.getItem('token') : ''
  },
  mutations: {
    setToken (state,token) {
      state.token =token;
      localStorage.setItem("token",token.token);     //存储token
    },
    delToken (state) {
      state.token = '';
      localStorage.removeItem("token");    //删除token
    }
  }
})

2.在页面中连接登录接口进行验证

登录

(1)输入框代码

<input type="text" v-model="username" placeholder="用户名" />
<input type="password" v-model="password" placeholder="密码"/>

(2)script代码

<script>
  import { mapMutations } from 'vuex';
  export default {
    name: "managerLogin",
    data() {
      return {
        username:'',      //用户名
        password:'',      //密码
      };
    },
    methods:{
      ...mapMutations(['setToken']),
      login:function() {
        if (this.username === '' || this.password === '') {
          alert("账号或密码不能为空!");
        }
        else {
          //根据api接口获取token
          this.$ajax.get('http:///api/wx/Public/login', {
            params: {      //传入参数
              username: this.username, password: this.password, device_type: "mobile"
            }
          }).then(
            res => {
              console.log(res.data);
              if(res.data.code===1) {    //若code=1则验证成功
                this.setToken({token: res.data.data.token});    //store中的为token赋值方法
                this.$router.push('/managerHome');
              }
              else{
                alert(res.data.msg);   //弹出错误信息
              }
            }).catch(error => {
            alert('接口连接错误');
            console.log(error);
          });

        }
      }
  }
</script>

退出登录

<script>
    import {mapMutations} from "vuex";
    export default {
      name: "manager_infor",
      methods:{
        ...mapMutations(['delToken']),
        exit:function(){
          this.delToken({token:''});
          this.$router.push('/managerLogin');
        }
      }
    }
</script>

3.路由守卫

这段代码放在路由文件里,作用是在页面跳转前通过查看本地存储的token值进行登录验证来判断是否跳转

router.beforeEach((to, from, next) => {
  if (to.path === '/managerLogin') {    //若要跳转的页面是登录界面
    next();     //直接跳转
  }
  else if (to.path === '/managerHome'){   //若要跳转的页面是个人界面
    let token = localStorage.getItem('token');    //获取本地存储的token值
    if (token===null||token===''){    //若token为空则验证不成功,跳转到登录页面
      next('/managerLogin');
    }
    else{           //不为空则验证成功
      next();
    }
  }
  else{
    next();
  }
});

export default router;

4.axios请求拦截器

这段代码放在src文件下的mian.js文件里

import axios from "axios";
import store from './store/main';
Vue.prototype.$ajax = axios

new Vue({
  el: '#app',
  router,
  store,     //store要加进来
  components: { App },
  template: '<App/>'
})

//请求拦截器
axios.interceptors.request.use(config => {
//判断是否存在token,如果存在将每个页面的header都添加token
  if(store.state.token){

    config.headers.common['XX-Token']=store.state.token   //此处的XX-Token要根据登录接口中请求头的名字来写
  }

  return config;
}, error => {
// 请求错误
  return Promise.reject(error);
});

//respone拦截器
axios.interceptors.response.use(
  response => {
    return response;
  },

  error => {  //默认除了2XX之外都为错误
    if(error.response){
      switch(error.response.status){
        case 401:
          this.$store.commit('delToken');
          router.replace({ //跳转到登录页面
            path: '/managerLogin',
            query: { redirect: router.currentRoute.fullPath } // 将跳转的路由path作为参数,登录成功后跳转到该路由
          });
      }
    }
    return Promise.reject(error.response);
  }
);

大功告成!

放上我的后端接口的数据结构作为参考,以上的代码使用不同的接口会有一些差异,要懂得灵活运用。

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持我们。

(0)

相关推荐

  • 一看就会的vuex实现登录验证(附案例)

    一.vuex是啥? Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式.它采用集中式存储管理应用的所有组件的状态,并以相应的规则保证状态以一种可预测的方式发生变化. 简单来说,Vuex 类似 Redux 的状态管理器,用来管理Vue的所有组件状态. 当你打算开发大型单页应用(SPA),会出现多个视图组件依赖同一个状态,来自不同视图的行为需要变更同一个状态. 遇到以上情况时候,你就应该考虑使用Vuex了,它能把组件的共享状态抽取出来,当做一个全局单例模式进行管理.这样不管你在何处改变状

  • vue + typescript + 极验登录验证的实现方法

    此功能基于vue(v2.6.8) + typescript(v3.3.3333), 引入极验(geetest v3+)(官方api),使用其product: 'bind'模式, 页面挂载后初始化ininGeetest,点击登录按钮后先做表单验证,通过后弹出滑块框,拖动验证成功,执行登录方法. 本项目为前后端分离,所以后端部署部分,请自行参考文档操作 后台接口: 开始:/public/js目录添加 jquery-1.12.3.min.js文件 和 gt.js(下载)在/public/index.h

  • vue+egg+jwt实现登录验证的示例代码

    原理:vue前端登录,提交账号密码给egg后端,后端比对信息后,使用jsonwebtoken对用户信息进行签名生成token,之后通过cookie返回给vue前端,前端需要使用token里的信息就使用js-base64进行token第二段解码即可. vue前端路由跳转,进入路由前置守卫检测cookie中的token是否存在,不存在(已过期)则跳转登录,否则继续执行,然后在http拦截器里请求时存在token请求头带上token,后端未得到header则返回错误码,得到则用jsonwebtoken

  • vue+springboot实现登录验证码

    本文实例为大家分享了vue+springboot实现登录验证码的具体代码,供大家参考,具体内容如下 先看效果图 在login页面添加验证码html 在后端pom文件添加kaptcha依赖 <dependency> <groupId>com.github.penggle</groupId> <artifactId>kaptcha</artifactId> <version>2.3.2</version> </depen

  • Vue实战之vue登录验证的实现代码

    最近一直在撸一个给大学生新生用的产品,在撸的时候有时候会发现自己力不从心,是不是我的能力下降,是不是我该放弃我的最热爱的事业了?这对我的心灵造成了巨大的伤害,所以我决定向苍老师起誓一定练好我这双手--好好写代码(想多的同学赶紧去面壁5秒钟再过来往下看)--- 我做的这个产品是课堂在线编程教学工具,由于涉及到商业问题,这里就不能和大家分享了,但是我可以把里面我认为很牛(zhuang)X(bi)的技术和大家分享分享啊. 如果你觉得我写的很 low的话欢迎加入igeekbar裙里来喷我啊,我在那里等你

  • vue router+vuex实现首页登录验证判断逻辑

    首页登录逻辑要求在页面上判断是否获取到登录token ,没有获取到则跳转到登录页.登录成功后,跳转到前一个页面. 1.vue router 路由判断首先我们想到的是router.beforeEach 前置导航守卫 ,这个方法接受三个参数 to from next . to参数为即将跳转的路由路径,from为当前导航正要离开的路由,next方法用来resolve这个钩子. 下面以工作中写的一个判断为为例子: router.beforeEach(async (to, from, next) => {

  • Vue中登录验证成功后保存token,并每次请求携带并验证token操作

    在vue中,可以用**Storage(sessionStorage,localStorage)**来存储token,也可以用vuex来存储(但要考虑页面刷新数据消失问题,可以在vuex用Storage), 下面介绍用localStorage来存储: 在登录请求成功后,会返回一个token值,用loaclStorage保存 localStorage.setItem('token',res.data.token) 在main.js中设置全局请求头和响应回来的判断 //设置axios请求头加入toke

  • vue实现登录验证码

    本文实例为大家分享了vue实现登录验证码的具体代码,供大家参考,具体内容如下 先来demo效果图 canvas验证码组件(可直接复制,无需改动) <template> <div class="s-canvas"> <canvas id="s-canvas" :width="contentWidth" :height="contentHeight"></canvas> </d

  • Vue+Flask实现简单的登录验证跳转的示例代码

    本文介绍了Vue+Flask实现简单的登录验证跳转,分享给大家,具体如下: 文件位置: login.html <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Login</title> <script type="text/javascript" src="../sta

  • vuex + axios 做登录验证 并且保存登录状态的实例

    还是那句话,网上找个完整的博客真的难,实现效果全靠摸索啊 第一步:安装axios .vuex npm i -s axios npm i -s vuex 执行这两句 ,vue等环境搭建就不废话了 第二步:配置main.js文件 上图不上码,菊花万人捅,附上代码 // The Vue build version to load with the `import` command // (runtime-only or standalone) has been set in webpack.base.

随机推荐