2024年Web前端最新vue 登录拦截及权限管理_service(2)，2024年最新Web前端面试总结

最后更多分享：前端字节跳动真题解析

开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】

• 

// 响应拦截器
service.interceptors.response.use(
//请求成功
response => {
const res = response.data;
if (res.code !== 200 && res.status !== 200) {
return Promise.reject(res)
} else {
return res
}
},
//请求失败
error => {
const {
response
} = error;
if (response) {
// 请求已发出，但是不在30分钟的范围
errorHandle(response.status, response.data.message);
return Promise.reject(response);
} else {
// 处理断网的情况
// eg:请求超时或断网时，更新state的network状态
// network状态在app.vue中控制着一个全局的断网提示组件的显示隐藏
// 关于断网组件中的刷新重新获取数据，会在断网组件中说明
// store.commit(‘changeNetwork’, false);
}
}
)
/**

• 请求失败后的错误统一处理
• @param {Number} status 请求失败的状态码
  */
  const errorHandle = (status, other) => {
  // 状态码判断
  switch (status) {
  // 401: 未登录状态，跳转登录页
  case 401:
  toLogin();
  break;
  // 403 token过期
  // 清除token并跳转登录页
  case 403:
  localStorage.removeItem(‘token’);
  MessageBox({
  message: ‘登录过期，请重新登录’,
  callback: action => {
  toLogin();
  }
  })
  break;
  // 404请求不存在
  case 404:
  tip(‘请求的资源不存在’);
  break;
  }
  }
  export default service

![](https://img-blog.csdnimg.cn/20200227163521948.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2dhb194dV81MjA=,size_16,color_FFFFFF,t_70) 


2.登录接口

interface.js

import request from ‘@/utils/request’
const base = {
local: ‘localhost’,
dev: ‘http://10.16.3330.39:8093/’,
}

//登录接口
export function dischargeLogin(params) {
return request.post(${base.dev}discharge/login, params)
}

login.vue

import * as Api from “@/api/interface”;

Api.login(this.loginForm).then(res=>{
this.$router.push({
path: “/home”
});
localStorage.setItem(“token”, res.data.token);
}).catch((e) => {
Message({
message: e.msg,
type: ‘error’,
duration: 1000
})
});

二.权限管理




### 文末

js前端的重头戏，值得花大部分时间学习。

![JavaScript知识](https://img-blog.csdnimg.cn/img_convert/701f4db8e7fc0c3ff4d87017d6c846be.png)

推荐通过书籍学习，《 JavaScript 高级程序设计（第 4 版）》你值得拥有。整本书内容质量都很高，尤其是前十章语言基础部分，建议多读几遍。

![前端电子书](https://img-blog.csdnimg.cn/img_convert/6065b7d33c9a5859971490467a967767.png)

**[开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】](https://bbs.csdn.net/forums/4304bb5a486d4c3ab8389e65ecb71ac0)**

另外，大推一个网上教程 现代 JavaScript 教程 ，文章深入浅出，很容易理解，上面的内容几乎都是重点，而且充分发挥了网上教程的时效性和资料链接。



学习资料在精不在多，二者结合，定能构建你的 JavaScript 知识体系。

面试本质也是考试，面试题就起到很好的考纲作用。想要取得优秀的面试成绩，刷面试题是必须的，除非你样样精通。

**这是288页的前端面试题**

![288页面试题](https://img-blog.csdnimg.cn/img_convert/6a0ed19303290ef201081fc6148f21db.png)

面试成绩，刷面试题是必须的，除非你样样精通。

**这是288页的前端面试题**

![288页面试题](https://img-blog.csdnimg.cn/img_convert/6a0ed19303290ef201081fc6148f21db.png)