vue用户登录之后每隔30s验证

需求： 当用户登录之后，我们可能需要每隔N秒，会去请求一下接口，去判断登录状态变化。

• 这里肯定要用到全局路由守卫router.beforeEach，登录之后路由跳转，开启定时器。

import userLoginState from './userLoginState';
router.beforeEach((to, from, next) => {
    if (to.name !== 'signIn' && to.meta.auth) {
        userLoginState.checkUserLoginState()
        next()
    }else{
        next();
    }
});

注意判断条件，我这里的判断条件是：不是登录页并且是登录授权token之后的页面，这里可能会有不是登录页也没有授权的页面

• 请求登录状态，判断登录状态，然后进行处理

//userLoginState.js
import api from '../api';
import { Message } from 'element-ui';

let userLoginStateTimer = ''
let userLoginState = false
export default{
            /**
         * @description 检查用户登录状态
         */
        async checkUserLoginState() {//请求
                clearInterval(userLoginStateTimer);
                userLoginStateTimer = null
                userLoginStateTimer = setInterval(async () => {
                    try {
                        const response = await api.account.checkUserLoginState()//请求登录状态接口
                        if (response.data.success) {
                            userLoginState = response.data.data;
                            this.userLoginStateJudge();
                        } else {
                            Message.error(response.data.msg)
                        }
                    } catch (error) {
                        Message.error(error)
                    }
                }, 30000);
        },
        /**
         * @description 用户登录状态处理
         */
        userLoginStateJudge() {//判断、处理
            if (!userLoginState) {//登录状态为false，清除本地缓存，跳登录页
				localStorage.removeItem("auth_admin_access_token");
				localStorage.removeItem("loginUserId");
				localStorage.removeItem("loginUserName");
				localStorage.removeItem("loginUserAccountType");
                clearInterval(userLoginStateTimer);
                userLoginStateTimer = null
				window.location.reload();
            }
        },
}

如果需要跳转的时候就立即执行登录验证，只需要进函数是接口请求一次就行了