欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

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

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

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

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

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

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

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

錯誤信息:提示錯誤消息

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

3、用戶點(diǎn)擊某功能模塊的觸發(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;

Login.vue

    submitLogin(formName){
            this.$refs[formName].validate(async (valid) => {
                if (valid) {
                    // 先發(fā)送請求,驗(yàn)證用戶
                    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信息驗(yàn)證功能實(shí)現(xiàn)的文章就介紹到這了,更多相關(guān)Vue token驗(yàn)證內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家!

相關(guān)文章

  • 解決vue中無法動態(tài)修改jqgrid組件 url地址的問題

    解決vue中無法動態(tài)修改jqgrid組件 url地址的問題

    下面小編就為大家分享一篇解決vue中無法動態(tài)修改jqgrid組件 url地址的問題,具有很好的參考價值,希望對大家有所幫助。一起跟隨小編過來看看吧
    2018-03-03
  • vue中router-view使用教程詳解

    vue中router-view使用教程詳解

    router-view組件作為vue最核心的路由管理組件,在項目中作為路由管理經(jīng)常被使用到,本文主要為大家詳細(xì)介紹了router-view具體使用,希望對大家有所幫助
    2023-12-12
  • Vue項目引入PWA的步驟

    Vue項目引入PWA的步驟

    這篇文章主要介紹了Vue項目引入PWA的步驟,幫助大家更好的理解和學(xué)習(xí)使用vue,感興趣的朋友可以了解下
    2021-04-04
  • vue使用better-scroll實(shí)現(xiàn)滑動以及左右聯(lián)動

    vue使用better-scroll實(shí)現(xiàn)滑動以及左右聯(lián)動

    這篇文章主要介紹了vue使用better-scroll實(shí)現(xiàn)滑動以及左右聯(lián)動,文中示例代碼介紹的非常詳細(xì),具有一定的參考價值,感興趣的小伙伴們可以參考一下
    2020-06-06
  • vue2項目實(shí)現(xiàn)自定義右鍵菜單,可添加圖標(biāo)、事件等方式

    vue2項目實(shí)現(xiàn)自定義右鍵菜單,可添加圖標(biāo)、事件等方式

    這篇文章主要介紹了vue2項目實(shí)現(xiàn)自定義右鍵菜單,可添加圖標(biāo)、事件等方式,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教
    2024-04-04
  • Vue Element-UI中el-table實(shí)現(xiàn)單選的示例代碼

    Vue Element-UI中el-table實(shí)現(xiàn)單選的示例代碼

    在element-ui中是為我們準(zhǔn)備好了可直接使用的單選與多選屬性的,本文主要介紹了Vue Element-UI中el-table實(shí)現(xiàn)單選的示例代碼,具有一定的參考價值,感興趣的可以了解一下
    2023-12-12
  • vue3觸發(fā)父組件兩種寫法

    vue3觸發(fā)父組件兩種寫法

    這篇文章主要介紹了vue3觸發(fā)父組件兩種寫法,本文通過實(shí)例代碼給大家介紹的非常詳細(xì),對大家的學(xué)習(xí)或工作具有一定的參考借鑒價值,需要的朋友可以參考下
    2023-08-08
  • 詳解用webpack2.0構(gòu)建vue2.0超詳細(xì)精簡版

    詳解用webpack2.0構(gòu)建vue2.0超詳細(xì)精簡版

    本篇文章主要介紹了詳解用webpack2.0構(gòu)建vue2.0超詳細(xì)精簡版,小編覺得挺不錯的,現(xiàn)在分享給大家,也給大家做個參考。一起跟隨小編過來看看吧
    2017-04-04
  • vue-nuxt?登錄鑒權(quán)的實(shí)現(xiàn)

    vue-nuxt?登錄鑒權(quán)的實(shí)現(xiàn)

    本文主要介紹了vue-nuxt?登錄鑒權(quán)的實(shí)現(xiàn),文中通過示例代碼介紹的非常詳細(xì),具有一定的參考價值,感興趣的小伙伴們可以參考一下
    2021-12-12
  • Vue3?封裝?Element?Plus?Menu?無限級菜單組件功能的詳細(xì)代碼

    Vue3?封裝?Element?Plus?Menu?無限級菜單組件功能的詳細(xì)代碼

    本文分別使用?SFC(模板方式)和?tsx?方式對?Element?Plus?*el-menu*?組件進(jìn)行二次封裝,實(shí)現(xiàn)配置化的菜單,有了配置化的菜單,后續(xù)便可以根據(jù)路由動態(tài)渲染菜單,對Vue3?無限級菜單組件相關(guān)知識感興趣的朋友一起看看吧
    2022-09-09

最新評論