vue的axios攔截器實現(xiàn)未登錄頁面跳轉(zhuǎn)

1.攔截器分為request請求攔截器和response響應(yīng)攔截器

PS:request請求攔截器:發(fā)送請求前統(tǒng)一處理,如:設(shè)置請求頭headers、應(yīng)用的版本號、終端類型等。
response響應(yīng)攔截器:有時候我們要根據(jù)響應(yīng)的狀態(tài)碼來進行下一步操作,例如:由于當(dāng)前的token過期,接口返回401未授權(quán),那我們就要進行重新登錄的操作。

2.main.js文件中(先安裝axios)

import axios from 'axios'

// 給Vue函數(shù)添加一個原型屬性$axios指向axios(全局使用axios)
// vue實例中直接用this.$axios就可以執(zhí)行axios方法
Vue.prototype.$axios=axios

3.http request 請求攔截器

PS:發(fā)送請求之前判斷是否存在token,除了登錄頁,其他頁面請求頭headers都添加token

// http request 請求攔截器
axios.interceptors.request.use(config => {
    // 在發(fā)送請求之前做些什么
    let pathname = location.pathname;
    if(localStorage.getItem('token')){
        if(pathname != '/' &&  pathname != '/login'){
            config.headers.common['token'] = localStorage.getItem('token');
        }
    }
    return config;
}, error => {
    // 對請求錯誤做些什么
    return Promise.reject(error);
});

4.http response 響應(yīng)攔截器

PS:若返回401,頁面跳轉(zhuǎn)到登錄頁面

// http response 響應(yīng)攔截器
axios.interceptors.response.use(response => {
    return response;
},error => {
    if (error.response) {
        switch (error.response.status) {
            // 返回401,清除token信息并跳轉(zhuǎn)到登錄頁面
            case 401:
            localStorage.removeItem('token');
            router.replace({
                path: '/login'
                //登錄成功后跳入瀏覽的當(dāng)前頁面
                // query: {redirect: router.currentRoute.fullPath}
            })
        }
        // 返回接口返回的錯誤信息
        return Promise.reject(error.response.data);
    }
});

springboot設(shè)置攔截器

package com.cignacmb.sms.common.interceptor;

import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.context.annotation.Configuration;
import org.springframework.web.servlet.config.annotation.InterceptorRegistry;
import org.springframework.web.servlet.config.annotation.WebMvcConfigurationSupport;

@Configuration
public class InterceptorConfig extends WebMvcConfigurationSupport {

    @Autowired
    private LoginInterceptor loginInterceptor;
    
    @Override
    protected void addInterceptors(InterceptorRegistry registry) {
        // 多個攔截器組成一個攔截器鏈
        // addPathPatterns 用于添加攔截規(guī)則,/**表示攔截所有請求
        // excludePathPatterns 用戶排除攔截
        registry.addInterceptor(loginInterceptor).addPathPatterns("/**");
//        .excludePathPatterns("/stuInfo/getAllStuInfoA","/account/register");    
        super.addInterceptors(registry);
    }
}
package com.cignacmb.sms.common.interceptor;

import javax.servlet.ServletOutputStream;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;

import org.slf4j.Logger;
import org.slf4j.LoggerFactory;
import org.springframework.stereotype.Component;
import org.springframework.web.servlet.HandlerInterceptor;
import org.springframework.web.servlet.ModelAndView;

import com.cignacmb.sms.common.Constants;

@Component
public class LoginInterceptor implements HandlerInterceptor {
    
    private static Logger log = LoggerFactory.getLogger(LoginInterceptor.class);

    @Override
    public void afterCompletion(HttpServletRequest arg0,
            HttpServletResponse arg1, Object arg2, Exception arg3)
            throws Exception {
        // TODO Auto-generated method stub
        
    }

    @Override
    public void postHandle(HttpServletRequest arg0, HttpServletResponse arg1,
            Object arg2, ModelAndView arg3) throws Exception {
        // TODO Auto-generated method stub
        
    }

    @Override
    public boolean preHandle(HttpServletRequest request, HttpServletResponse response,
            Object handler) throws Exception {
        //獲取請求的URL
        String url = request.getRequestURI();
        log.info("請求url:" + url);
        //URL:除了登陸的請求,其余都攔截
        if (url != null && url.contains("/login")) {
            return true;
        }
        //判斷是否已登錄
        if(request.getSession().getAttribute(Constants.USER_SESSION) != null){
            return true;
        }
        response.setContentType("text/html;charset=UTF-8");
        ServletOutputStream out = response.getOutputStream();
        out.write("未授權(quán)訪問,請登錄賬號".getBytes("UTF-8"));
        response.setStatus(999);
        out.flush();
        out.close();
        return false;
    }

}

原文鏈接:https://blog.csdn.net/weixin_39378691/article/details/83750056

?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
【社區(qū)內(nèi)容提示】社區(qū)部分內(nèi)容疑似由AI輔助生成,瀏覽時請結(jié)合常識與多方信息審慎甄別。
平臺聲明:文章內(nèi)容(如有圖片或視頻亦包括在內(nèi))由作者上傳并發(fā)布,文章內(nèi)容僅代表作者本人觀點,簡書系信息發(fā)布平臺,僅提供信息存儲服務(wù)。

相關(guān)閱讀更多精彩內(nèi)容

友情鏈接更多精彩內(nèi)容