6.22 项目实战中的经验总结（一）

た入场券 2023-10-03 09:00 5阅读 0赞

## 项目场景1： ##

点击退出功能（登录后进入原页面）

--------------------

### 问题描述： ###

用户退出登录的逻辑比较通用，一般的做法都是一致的 1.如果有登出接口，就调用（注意：并不是所有的项目中，都有退出接口） 2.退出接口成功调用之后清空本地用户信息（token、userInfo） 3.如果需要携带必要参数跳\*\*回到登录页面\*\*准备重新登录操作

--------------------

### 解决方案： ###

先要弹出提示框问客户要退出吗？第二步如果点击确定离开，要清除保存的token和用户信息，由于保存在vuex中，所以使用actions （这里使用actions原因就是点击退出登录清理token是一个异步的，所以要用actions（组件内使用dispatch））。而actions并没有发请求，只是简单地注册了一下，然后就调用mutations 点击退出到登录页--登录后--再登录回到之前页面  第一步 登陆成功进入页面：\`this.$route.query.return\_url\` (return\_url随便写,登录到指定页面) 第二步，退出的时候，回传 如何获取当前页面的地址 :\`\`\`this.$route.fullPath\`\`\` \`this.$route.path\`只有路径的信息

this.$router.push('/login?return_url=' + encodeURIComponent(this.$route.fullPath))

--------------------

## 2 token 失效问题 ##

> **token失效**–请求拦截器发token，如token失效，则被响应拦截器拦截，**`应在响应拦截器处理错误逻辑`**：如果错误是XXX（和后端约定一个状态码，判断是不是token失效），那么就去登录页（注意，这是后台管理，不存在refresh\_token ）-----注意：先把token干掉，在去登录页，不然会报错（原因是路由守卫，会进行判断，你有没有token，加入你原token还在）

## 项目中的知识零散知识点 ##

mackdown模式真垃圾！

## 1 ##

> 在.js文件中，路径拼接时`router.currentRoute.fullPath`  
> 等价于`this.$route.fullPath`

## 2 ##

> 优化–频繁获取用户信息–导致只要一点页面就发请求–解决：每一个用户都有一个id，我们只需要判断，你有没有id，如果没有就发起请求，如果有就不发了。–逻辑应该是在路由守卫里做。–毕竟他管的是页面的跳转

## 3 ##

> 不同的用户看到的菜单是不会一样的–请求用户信息的时候，会返回一个能到到的数组，里面是哪些页面的名字。–本项目共有8个页面–后端给几个我就筛选出来+可以不需权限的页面–生成最终的路由表–建一个静态路由表和一个动态路由表

## 4 ##

> 静态路由–可以理解成不需要权限的页面–动态路由–就是后端根据权限返回的可访问的路由–然后两者一加，就是最终可以访问的路由（也就是路由表）

## 5 ##

> 路由的原理–对URL的hash值进行改变或者监听，切换到对应的页面组件的dom --工作原理手写  
> 01-创建组件02-利用动态组件控制要显示的组件03 点击a 跳转04 监测hash的变化，一旦变化就切换