项目场景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的变化，一旦变化就切换

6

给变量赋初始值的时候要考虑什么？我们要装什么东西进去

7

左侧菜单自动生成的逻辑–遍历路由表

左侧菜单的文字–title–图标–icon–都在meta对象中

8

为什么404、login没显示–因为他们有一个属性–然后v-if–就不让他们显示

9

vue路由自带一个属性meta–路由源信息–可以放任何东西–比如可以放菜单栏每行叫什么名字，或者icon图标

10

路由也可以遍历，route是一个路由，routes是一组路由。

11

$router–路由对象每一个组件都能用

12

现有的icon图标不好看，我想要好看的怎么办？—www.iconfont—复制SVG代码下来，放到目录下面（icons=>svg）–用的时候改icon名字就好

13

SVG是全局组件–是webpack提供的，需要svg-sprite-loader的配合，还需要vue.config配置项

14

module.exports-- node导出

-export default --es6导出