ashx文件 验证是否登录_微服务和VUE(10)： token验证前端登录拦截以及token过期提醒...

1. 前言

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

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

2. 修改头部导航栏

将

全部功能

改为

  {{username}}  退出登录  个人中心

  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');      }    }  }

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

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