美文网首页
项目中接口使用Token

项目中接口使用Token

作者: 咔簌 | 来源:发表于2019-08-07 15:48 被阅读0次

请求登录接口后将需要的凭证保存在localStorage中(如:token)

localStorage.setItem("token", res.data.token);

在封装http工具类,请求拦截器时将token 设置到请求头部中

service.interceptors.request.use(
     (config:AxiosRequestConfig)=>{
        
        if (localStorage.token) {
            config.headers.Authorization = localStorage.token;
          }
        return config;
     },
     (err:any)=>{
         Promise.reject(err)
     }
 )

响应拦截器如果是返回401错误,则将localStorage中的token 移除掉

service.interceptors.response.use(
     (response:AxiosResponse)=>{
         return response
     },
     (err:any)=>{
        let errMsg = '';
        if (err && err.response.status) {
            switch (err.response.status) {
                case 401:
                    errMsg = '登录状态失效,请重新登录';
                    localStorage.removeItem('token');
                    router.push('/login');
                    break;

                default:
                    errMsg = err.response.data.msg;
                    break;
            }
        }else{
            errMsg = err;
        }

        Message.error(errMsg);
        return Promise.reject(errMsg);
    }
)

如果有退出登录功能,就在请求后将其移除

localStorage.removeItem("token");

相关文章

网友评论

      本文标题:项目中接口使用Token

      本文链接:https://www.haomeiwen.com/subject/lmnodctx.html