亚洲乱码中文字幕综合,中国熟女仑乱hd,亚洲精品乱拍国产一区二区三区,一本大道卡一卡二卡三乱码全集资源,又粗又黄又硬又爽的免费视频

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

 更新時(shí)間:2022年12月27日 15:06:23   作者:Eric加油學(xué)!  
最近公司新啟動(dòng)了個(gè)項(xiàng)目,用的是vue框架在做,下面這篇文章主要給大家介紹了關(guān)于vue實(shí)現(xiàn)token登錄驗(yàn)證的相關(guān)資料,文中通過(guò)實(shí)例代碼介紹的非常詳細(xì),需要的朋友可以參考下

用戶在首次訪問(wèn)網(wǎng)站時(shí),應(yīng)在登錄頁(yè)面填寫賬號(hào)密碼,前端攜帶用戶信息向服務(wù)器請(qǐng)求。

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

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

驗(yàn)證通過(guò):對(duì)該用戶創(chuàng)建token,并以響應(yīng)數(shù)據(jù)返回給前端

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

錯(cuò)誤信息:提示錯(cuò)誤消息

正確信息:頁(yè)面進(jìn)行跳轉(zhuǎn)至首頁(yè),同時(shí)保存token(可以保存在cookie或localstorage)

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

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

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

request.js

// 對(duì)于axios進(jìn)行二次封裝
import axios from 'axios';
const requests = axios.create({
    // 配置對(duì)象
    // 基礎(chǔ)路徑,發(fā)請(qǐng)求的時(shí)候,路徑當(dāng)中會(huì)有api
    baseURL: "/api",
    // 代表請(qǐng)求超時(shí)的時(shí)間 5s
    timeout: 5000,
});
 
// 請(qǐng)求攔截器:在發(fā)請(qǐng)求之前,請(qǐng)求攔截器可以監(jiān)測(cè)到,可以在請(qǐng)求發(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代表沒(méi)有訪問(wèn)權(quán)限
            if (data.code === 20006) {
                alert('您沒(méi)有該功能的權(quán)限!')
            }
            // 將錯(cuò)誤信息通過(guò)Promise返回,
            return Promise.reject(message)
        }
    },(error)=>{
        // 服務(wù)器響應(yīng)失敗的回調(diào)函數(shù)
        return Promise.reject(error);
    }
);
// 對(duì)外暴露
export default requests;

Login.vue

    submitLogin(formName){
            this.$refs[formName].validate(async (valid) => {
                if (valid) {
                    // 先發(fā)送請(qǐng)求,驗(yàn)證用戶
                    const {username,password} = this.loginForm;
                    let result = await this.$API.login.reqLogin(username,password);
                    if(result.code == 200){
                        // 成功后存儲(chǔ)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('請(qǐng)重新輸入賬戶和密碼');
                    return false;
                }
            });
        }

在上面的代碼中,將token和響應(yīng)的時(shí)間戳一起保存成json對(duì)象,這樣可以做到 每隔一定時(shí)間后需要重新登錄的功能

router.js

// 判斷登錄是否過(guò)時(shí),一天
let time=24 * 60 * 60 * 1000
// 全局前置守衛(wèi)(路由跳轉(zhuǎn)之前進(jìn)行判斷)
router.beforeEach((to, from, next) => {
    // 用戶登錄了才會(huì)有token,所以可以用來(lái)判斷是否登錄  
    let token = JSON.parse(localStorage.getItem('token'));
    if (token) {
        let deltime = new Date().getTime()
        if(deltime - token.time > time){
            alert('登錄已經(jīng)過(guò)期,請(qǐng)重新登錄')
            localStorage.removeItem('token')
            next('/login')
        }else{
          next()
        }
    } else {   // 若沒(méi)有token,訪問(wèn)登錄頁(yè)面放行,其他的路由請(qǐng)求均拒絕,跳轉(zhuǎn)到登錄頁(yè)
        if (to.path == '/login') {
            next()
        } else {
            if(from.path == '/'){
                next('/login')
            }else{
                alert('請(qǐng)先登錄,再訪問(wèn)其他頁(yè)面')
                next('/login')
            }
        }
    }
})

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

相關(guān)文章

最新評(píng)論