vue设置了全局http拦截器,如何使某个页面不使用拦截器进行拦截,可以直接敲url访问?

Posted

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了vue设置了全局http拦截器,如何使某个页面不使用拦截器进行拦截,可以直接敲url访问?相关的知识,希望对你有一定的参考价值。

在浏览器直接敲http://ip:端口/#/prisonLogin?correctioncode=0000004,进行页面的访问。vue小白,在改前辈的代码,希望得到大家的回答。谢谢!!!

参考技术A 把某个页面的拦截器放开
请采纳追问

怎么放啊?请问

追答

每个人拦截的方式都不同,我都不知道你怎么拦截的,我怎么教你放开?

使用全局axios拦截器时如何防止出现多次401错误警告

【中文标题】使用全局axios拦截器时如何防止出现多次401错误警告【英文标题】:How to prevent multiple 401 error warnings when using global Axios interceptor 【发布时间】:2020-07-30 11:20:59 【问题描述】:

在 ReactJS 项目中,我设置了一个全局 Axios 拦截器来处理 401 错误并重定向到登录页面。如果服务器返回 401 错误,这将按预期工作。

//global interceptor for handling 401 (invalid token) response.
axios.interceptors.response.use(
  function (response) 
    console.log("Axios defaut interceptor");
    return response;
  ,
  function (error) 
    if (401 === error.response.status) 
      alert(
        "Your session has expired. You will be redirected to the login page."
      );
      window.location = "/login";
     else 
      return Promise.reject(error);
    
  
);

问题是从主页类组件的constructor()方法发送了多个GET请求。这会导致多次显示警报消息。

处理错误并仅重定向到登录页面一次的最佳方法是什么?

【问题讨论】:

【参考方案1】:

解决方案是在加载页面之前验证令牌是否存在。

我使用路由器加载主页:

<Router basename="/home">
    <Switch>
    <AuthenticateRoute
       path="/"
       exact=true
       component=<Main component - change this>
/></Router>

在 AuthenticateRoute 组件中,验证是否存在具有有效到期日期的令牌。

class AuthenticatedRoute extends Component 
    render() 
       var isValidToken = false;
       const token = localStorage.getItem(USER_TOKEN);
       if (token === null) isValidToken = false;
       var decodedToken = jwt.decode(token,  complete: true );
       if (decodedToken.payload === null) isValidToken = false;
       //Get the current time in seconds.
       var dateNow = new Date();
       var nowDateSeconds = parseInt(dateNow.getTime() / 1000);
       //Check if token expiry time greater than current time (valid token)
       if (decodedToken.payload.exp > nowDateSeconds) 
            isValidToken = true;
       
       if (isValidToken ) 
            return <Route ...this.props />
         else 
            return <Redirect to="/login" /> 
        

    

如果令牌无效,则不会加载主页。 注意:此代码不会授权/验证令牌。它只是在加载主要组件之前检查是否存在有效的日期令牌。

更多关于浏览器中 JWT 令牌验证的详细信息 - React - How to check if JWT is valid before sending a post request?

【讨论】:

以上是关于vue设置了全局http拦截器,如何使某个页面不使用拦截器进行拦截,可以直接敲url访问?的主要内容,如果未能解决你的问题,请参考以下文章

将 Typescript 与 Laravel 和 Vue.js 一起使用,导入不使其成为 Vue 组件?

vue拦截器Vue.http.interceptors.push

vue中使用router全局守卫实现页面拦截及安全问题的一点感想

前端如何实现登录拦截?

Vue 自定义header

使用全局axios拦截器时如何防止出现多次401错误警告