项目中接口使用Token

2019-08-07  本文已影响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");
上一篇 下一篇

猜你喜欢

热点阅读