Vue前端登錄token信息驗證功能實現(xiàn)

更新時間：2022年12月27日 15:06:23 作者：Eric加油學(xué)！

最近公司新啟動了個項目，用的是vue框架在做,下面這篇文章主要給大家介紹了關(guān)于vue實現(xiàn)token登錄驗證的相關(guān)資料,文中通過實例代碼介紹的非常詳細(xì),需要的朋友可以參考下

用戶在首次訪問網(wǎng)站時，應(yīng)在登錄頁面填寫賬號密碼，前端攜帶用戶信息向服務(wù)器請求。

1、服務(wù)器驗證用戶信息

驗證失?。航o前端響應(yīng)數(shù)據(jù)

驗證通過：對該用戶創(chuàng)建token，并以響應(yīng)數(shù)據(jù)返回給前端

2、前端接受后端響應(yīng)的數(shù)據(jù)

錯誤信息：提示錯誤消息

正確信息：頁面進(jìn)行跳轉(zhuǎn)至首頁，同時保存token（可以保存在cookie或localstorage）

3、用戶點擊某功能模塊的觸發(fā)請求（比如某功能有權(quán)限設(shè)置或是是否需要token）

利用路由守衛(wèi)beforeEach()

將保存的token添加至請求攔截器的請求頭中，并根據(jù)響應(yīng)攔截器返回的狀態(tài)碼判斷該功能模塊是否有權(quán)限做出相應(yīng)的跳轉(zhuǎn)或攔截。

request.js

// 對于axios進(jìn)行二次封裝
import axios from 'axios';
const requests = axios.create({
    // 配置對象
    // 基礎(chǔ)路徑，發(fā)請求的時候，路徑當(dāng)中會有api
    baseURL: "/api",
    // 代表請求超時的時間 5s
    timeout: 5000,
});
 
// 請求攔截器：在發(fā)請求之前，請求攔截器可以監(jiān)測到，可以在請求發(fā)出去之前做一些事情
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;
});
// 響應(yīng)攔截器
requests.interceptors.response.use(
    (res)=>{
        const { status, data,message } = res
        if(data.success){
           return data
        }else{
            // 假設(shè)后端返回狀態(tài)碼20005代表沒有訪問權(quán)限
            if (data.code === 20006) {
                alert('您沒有該功能的權(quán)限!')
            }
            // 將錯誤信息通過Promise返回，
            return Promise.reject(message)
        }
    },(error)=>{
        // 服務(wù)器響應(yīng)失敗的回調(diào)函數(shù)
        return Promise.reject(error);
    }
);
// 對外暴露
export default requests;

    submitLogin(formName){
            this.$refs[formName].validate(async (valid) => {
                if (valid) {
                    // 先發(fā)送請求，驗證用戶
                    const {username,password} = this.loginForm;
                    let result = await this.$API.login.reqLogin(username,password);
                    if(result.code == 200){
                        // 成功后存儲token并路由跳轉(zhuǎn)
                        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和響應(yīng)的時間戳一起保存成json對象，這樣可以做到每隔一定時間后需要重新登錄的功能

router.js

// 判斷登錄是否過時，一天
let time=24 * 60 * 60 * 1000
// 全局前置守衛(wèi)（路由跳轉(zhuǎn)之前進(jìn)行判斷）
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('登錄已經(jīng)過期，請重新登錄')
            localStorage.removeItem('token')
            next('/login')
        }else{
          next()
        }
    } else {   // 若沒有token，訪問登錄頁面放行，其他的路由請求均拒絕，跳轉(zhuǎn)到登錄頁
        if (to.path == '/login') {
            next()
        } else {
            if(from.path == '/'){
                next('/login')
            }else{
                alert('請先登錄，再訪問其他頁面')
                next('/login')
            }
        }
    }
})

到此這篇關(guān)于Vue前端登錄token信息驗證功能實現(xiàn)的文章就介紹到這了,更多相關(guān)Vue token驗證內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

您可能感興趣的文章: