先思考,后去实现;
··································
不仅仅是一个小的功能点,对于项目已开始整体的把握就要着手行动了,以一下两篇文章为例展开叙述:
文章A文章B
整体把控上
同样是做登陆访问控制,和页面权限管理
文章A 项目一开始规划,就从路由url做出了区分,然后携带token
文章B 项目一开始规划,并没有规划路由,直接所有路由都要带token
拦截的话就根据后台的接口来做出判断,进行处理:
文章A: 不会直接给你报错,但是会给你返回状态码,所以在响应成功里处理逻辑
文章B: 直接给你报错,所以在响应错误里处理逻辑
另一个角度来看两者的请求拦截根据token的有无,没有token自然就不用带了。一个是根据url来判断
小的功能点把控上
1、清空本地的无效用户信息
2、跳转到登陆页面
3、登陆完之后,还要跳到原来的页面(购物车页面因为没有登陆–>跳到登陆页–>登陆 完成再跳回来)
思考这个共呢个怎么实现,肯定是这样,进入到当前购物车页面的时候,跳转登陆页的时候,把当前路由作为参数带过去,
然后登陆成功后,再在登陆页面跳回来
// 响应业务逻辑
API.interceptors.response.use(
function (response) {
// 调用接口的时候直接就拿到了实际数据
return response.data;
},
function (error) {
// Do something with response error
// 401 状态码 error.response是为了排除投后台接口没有响应
if (error.response && error.response.status === 401) {
// 1、清空本地的无效用户信息
store.commit('user/setUser', {})
// 2、跳转到登陆页面
// 3、登陆完之后,还要跳到原来的页面(购物车页面因为没有登陆-->跳到登陆页-->登陆 完成再跳回来)
// 当前路由地址获取:
// 在组件里面:$route.path 弊端: `/user?a=10` $route.path只能拿到'/user'
// 所以有了 $route.full.fullpath 可以拿到 '/user?a=10'
// 在js模块中: router.currentRoute.fullPath 就是当前路由地址----vue2中
// 在vue3中router.currentRoute已经是一个ref声明的响应是数据,所以要 outer.currentRoute.value.fullPath
// 有一个隐患如果地址是这样的'/user?a=10&b=12' &有特殊字符,需要转码要是不转码可能就只能拿到'/user?a=10'
const fullPath = encodeURIComponent(router.currentRoute.value.fullPath)
router.push('/login?redirectUrl=' + fullPath)
}
return Promise.reject(error);
}
);
请求拦截要加token,但是没有做万一没有token呢,没有做处理,试验了一下,没有从localStorage中拿到想要的值会出现什么情况,如下