vue中token驗證登錄


// 首次登錄獲取token存儲在localStorage或者vueX中
// 在請求攔截器(request)中設置每次請求都攜帶token
axios.interceptors.request.use(function (config) {
    // 在請求之前驗證token,是否有token或者過期
    let myToken = window.localStorage.getItem('token')
    if (token) {
        axios.defaults.headers.common['Authorization'] = myToken
    } else {
        this.$router.replace({
            // 跳轉登錄頁
            path: '/login',
            // 存儲路徑,登錄成功跳轉
            query: {redirect: this.$router.currentRoute.fullPath}
        })
    }
    return config
}, function (error) {
    // 對錯誤進行判斷
    // 如果返回401,則跳轉到登錄頁
    switch (error.response.status) {
        case 401:
            this.$router.replace({
                path: '/login',
                query: {redirect: this.$router.currentRoute.fullPath}
            })
    }
    return Promise.reject(error)
})
    
// 通過路由守衛來判斷當前路由頁面是否需要某種條件限制
router.beforeEach(to, from, next) {
	// 判斷是否限制
    if (to.meta.requiresAuth) {
        // 判斷token
        if (token) {
            
        } else {
            
        }
    } else {
        next()
    }
}


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM