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

hdubigben

已于 2023-02-11 11:01:30 修改

阅读量1.9k

点赞数

分类专栏：微服务和VUE 文章标签： vue java

于 2020-08-13 16:52:17 首次发布

本文链接：https://blog.csdn.net/weixin_42754905/article/details/107958233

版权

微服务和VUE 专栏收录该内容

27 篇文章 18 订阅

订阅专栏

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

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过期，并进行提醒。