微服务和VUE入门教程(10): token验证-前端登录拦截以及token过期提醒

微服务和VUE入门教程(0): 着手搭建项目
微服务和VUE入门教程(1): 搭建前端登录界面
微服务和VUE入门教程(2): 注册中心
微服务和VUE入门教程(3): user微服务的搭建
微服务和VUE入门教程(4):网关zuul的搭建
微服务和VUE入门教程(5): 前后端交互
微服务和VUE入门教程(6):连接数据库-mybatis
微服务和VUE入门教程(7):配置中心-config
微服务和VUE入门教程(8):前端主页的编写
微服务和VUE入门教程(9): token验证-token后端生成以及前端获取
微服务和VUE入门教程(10): token验证-前端登录拦截以及token过期提醒
微服务和VUE入门教程(11): mybatis 动态查询
微服务和VUE入门教程(12):前端提示搜索框的实现
微服务和VUE入门教程(13): token验证-zuul拦截与验证
微服务和VUE入门教程(14): 热部署
微服务和VUE入门教程(15): 课堂小知识
微服务和VUE入门教程(16): zuul 熔断
微服务和VUE入门教程(17): VUE 响应拦截器
微服务和VUE入门教程(18): 前端接口模块化
微服务和VUE入门教程(19): VUE组件化–子组件向父组件通信
微服务和VUE入门教程(20): VUE组件化–父组件向子组件通信
微服务和VUE入门教程(21): springboot中定时器-Schedule
微服务和VUE入门教程(22): 页面长时间未操作自动退出登录
微服务和VUE入门教程(23): 微服务之间的调用
微服务和VUE入门教程(24): 微服务之断路器
微服务和VUE入门教程(25): 微服务之Hystrix-dashboard
微服务和VUE入门教程(26): 微服务之turbine
微服务和VUE入门教程(27):VUE前端工程打包

1. 前言

前端登录拦截:我们的需求,除了登录界面,如果用户未登录,则不可以访问其他界面。往浏览器的输入框中直接输入其他页面的url则直接跳转至登录页面,进行登录。

token过期提醒: token有效期为24小时,若24小时之后,必须重新登录来获取新的token值。

2. 修改头部导航栏

<a ...>全部功能</a>

改为

<el-submenu style="color: #bfcbd9;float: right;">
  <template slot="title">{{username}}</template>
  <el-menu-item @click="logonOut" >退出登录</el-menu-item>
  <el-menu-item >个人中心</el-menu-item>
</el-submenu>
<script>
  export default {
    name: 'NavMenu',
    data () {
        ......
        ......
    },
    computed: {
      username() {
        let username = localStorage.getItem('userName');
        return username;
      }
    },
    methods: {
      logonOut(){
        localStorage.removeItem('userName');
        localStorage.removeItem('Authorization');
        localStorage.removeItem('signTime');
        this.$router.push('/login');
      }
    }
  }
</script>

这样我们登陆之后,可以在导航栏中看到用户名,并且编写了一个退出登录的方法-清楚本地保存的全局变量,跳转至登录页面。

在这里插入图片描述

3. 前端登录拦截

3.1 修改前端main.js文件

这里我们使用 router.beforeEach(),意思是在访问每一个路由前调用。

首先判断跳转的路径是否是登录页面,若是,则不拦截,直接跳转;若不是,则验证Authorization是否为空。
若为空,则说明未登录,跳转到登录页面。若不为空,说明已登录,直接跳转到相应页面

通过这样的配置,前端若想访问除登录页面之外的其他页面,就需要先进行登录,从而获取token。

//前端拦截
router.beforeEach((to, from, next)=>{
  //判断跳转的路径是否是登录页面,若是,则不拦截,直接跳转;
  //若不是,则验证Authorization是否为空
  //若为空,则说明未登录,跳转到登录页面。若不为空,说明已登录,直接跳转到相应页面
  if(to.path === '/login'){
    next();
  }else {
    let Authorization = localStorage.getItem('Authorization');
    if(Authorization === null || Authorization === ''){
      next('/login');
    }else{
      next();
    }
  }
});

3.2 token过期提醒

token有效期为24小时,若24小时之后,必须重新登录来获取新的token值。因此当token过期之后,前端应该有所提醒。

//验证Authorization是否过期
this.timer = setInterval(function () {
  if(localStorage.getItem('signTime')){
    //获取token生成时间
    let signTime = localStorage.getItem('signTime');
    //现在时间
    let currentTime = new Date().getTime();
    //比较时间间隔
    if((currentTime-signTime)> 10*1000){
      //清空登录信息
      localStorage.removeItem("userName");
      localStorage.removeItem("Authorization");
      localStorage.removeItem("signTime");
      //弹出框提醒,页面跳转
      window.alert("登录已过期,请重新登录");
      window.location.href = '/';
    }
  }
},2*1000);

在前端的main.js中加入如上代码。我们设置了一个循环执行(setInterval)。为了演示,我们设置为每2秒来执行一次,若token时长超过10秒,我们则判定为token过期,并进行提醒。

4. 验证

  1. 若我们不进行登录,直接输入:http://localhost:8080/#/stuInfoMgmt,不会进入相应页面,会自动跳到登录页面。
  2. 等我们登录一段时间后,会自动跳出弹框。
    在这里插入图片描述
Logo

权威|前沿|技术|干货|国内首个API全生命周期开发者社区

更多推荐