Vue前端登录token信息验证功能实现

// 对于axios进行二次封装
import axios from 'axios';
const requests = axios.create({
    // 配置对象
    // 基础路径，发请求的时候，路径当中会有api
    baseURL: "/api",
    // 代表请求超时的时间 5s
    timeout: 5000,
});
 
// 请求拦截器：在发请求之前，请求拦截器可以监测到，可以在请求发出去之前做一些事情
requests.interceptors.request.use(
    (config)=>{
        const token = localStorage.getItem('token');
        // console.log('token',token);
        if(token) {
            let token = JSON.parse(localStorage.getItem('token')).token;
            config.headers['Authorization'] = token;
        }
    return config;
});
// 响应拦截器
requests.interceptors.response.use(
    (res)=>{
        const { status, data,message } = res
        if(data.success){
           return data
        }else{
            // 假设后端返回状态码20005代表没有访问权限
            if (data.code === 20006) {
                alert('您没有该功能的权限!')
            }
            // 将错误信息通过Promise返回，
            return Promise.reject(message)
        }
    },(error)=>{
        // 服务器响应失败的回调函数
        return Promise.reject(error);
    }
);
// 对外暴露
export default requests;

    submitLogin(formName){
            this.$refs[formName].validate(async (valid) => {
                if (valid) {
                    // 先发送请求，验证用户
                    const {username,password} = this.loginForm;
                    let result = await this.$API.login.reqLogin(username,password);
                    if(result.code == 200){
                        // 成功后存储token并路由跳转
                        let token = {
                            time: new Date().getTime(),
                            token: result.data
                        };
                        localStorage.setItem("token",JSON.stringify(token));
                        this.$router.replace('/home');
                        this.$message({type:'success',message:'登录成功'});
                    }else{
                        alert('登录失败')
                    }
                } else {
                    this.$message.error('请重新输入账户和密码');
                    return false;
                }
            });
        }

// 判断登录是否过时，一天
let time=24 * 60 * 60 * 1000
// 全局前置守卫（路由跳转之前进行判断）
router.beforeEach((to, from, next) => {
    // 用户登录了才会有token，所以可以用来判断是否登录  
    let token = JSON.parse(localStorage.getItem('token'));
    if (token) {
        let deltime = new Date().getTime()
        if(deltime - token.time > time){
            alert('登录已经过期，请重新登录')
            localStorage.removeItem('token')
            next('/login')
        }else{
          next()
        }
    } else {   // 若没有token，访问登录页面放行，其他的路由请求均拒绝，跳转到登录页
        if (to.path == '/login') {
            next()
        } else {
            if(from.path == '/'){
                next('/login')
            }else{
                alert('请先登录，再访问其他页面')
                next('/login')
            }
        }
    }
})