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

用户在首次访问网站时，应在登录页面填写账号密码，前端携带用户信息向服务器请求。

1、服务器验证用户信息

验证失败：给前端响应数据

验证通过：对该用户创建token，并以响应数据返回给前端

2、前端接受后端响应的数据

错误信息：提示错误消息

正确信息：页面进行跳转至首页，同时保存token（可以保存在cookie或localstorage）

3、用户点击某功能模块的触发请求（比如某功能有权限设置或是是否需要token）

利用路由守卫beforeEach()

将保存的token添加至请求拦截器的请求头中，并根据响应拦截器返回的状态码判断该功能模块是否有权限做出相应的跳转或拦截。

request.js

// 对于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;

Login.vue

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

在上面的代码中，将token和响应的时间戳一起保存成json对象，这样可以做到 每隔一定时间后需要重新登录的功能

router.js

// 判断登录是否过时，一天
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')
            }
        }
    }
})

到此这篇关于Vue前端登录token信息验证功能实现的文章就介绍到这了,更多相关Vue token验证内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！