微服务和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. 等我们登录一段时间后，会自动跳出弹框。