总体思路：
1.用户填写完账号和密码后向服务端验证是否正确，验证通过之后，服务端会返回一个token。
2.拿到token之后将这个token存起来，保证刷新页面后能记住用户登录状态，根据token去调用userInfo的接口来获取用户的详细信息（如用户权限，用户名等等信息）。
3.权限验证：通过token获取用户对应的权限，将请求的权限数组和用户信息存储到vuex中 ，动态根据用户的权限通过处理得到其对应有权限的路由，通过 router.addRoutes 动态添加这些路由。
一、登录：
登录成功后，服务端会返回一个 token（该token的是一个能唯一标示用户身份的一个key），之后我们将token存储在本地localstorage之中，这样下次打开页面或者刷新页面的时候能记住用户的登录状态，不用再去登录页面重新登录了。
存token
涉及的安全性问题：
为了保证安全性，后台所有token有效期(Expires/Max-Age)都是Session，就是当浏览器关闭了就丢失了。重新打开浏览器都需要重新登录验证，后端也会在每周固定一个时间点重新刷新token，让后台用户全部重新登录一次，确保后台用户不会因为电脑遗失或者其它原因被人随意使用账号。
二、拦截路由进行判断
用户登录成功之后，我们会在全局钩子router.beforeEach中拦截路由，判断是否已获得token，在获得token之后我们就要去获取用户的基本信息了
image.png
页面会先从 localstorage中查看是否存有 token，没有，就走一遍上一部分的流程重新登录，如果有token,就会把这个 token 返给后端去拉取user_info，保证用户信息是最新的。 当然如果是做了单点登录得的的话，用户信息存储在本地也是可以的。当你一台电脑登录时，另一台会被提下线，所以总会重新登录获取最新的内容。
三、权限控制
前端会有一份路由表，它表示了每一个路由可访问的权限。当用户登录之后，通过 token 获取用户的 role ，动态根据用户的 role 算出其对应有权限的路由，再通过router.addRoutes动态挂载路由。但这些控制都只是页面级的，说白了前端再怎么做权限控制都不是绝对安全的，后端的权限验证是逃不掉的。
router.addRoutes动态添加路由
前端控制页面级的权限，不同权限的用户显示不同的侧边栏和限制其所能进入的页面(也做了少许按钮级别的权限控制)，后端则会验证每一个涉及请求的操作，验证其是否有该操作的权限，每一个后台的请求不管是 get 还是 post 都会让前端在请求 header里面携带用户的 token，后端会根据该 token 来验证用户是否有权限执行该操作。若没有权限则抛出一个对应的状态码，前端检测到该状态码，做出相对应的操作。
请求拦截内设置请求头
四、利用vuex管理路由表，根据vuex中可访问的路由渲染侧边栏组件。
具体实现：
1.创建vue实例的时候将vue-router挂载，但这个时候vue-router挂载一些登录或者不用权限的公用的页面。
2.当用户登录后，获取用role，将role和路由表每个页面的需要的权限作比较，生成最终用户可访问的路由表。
3.调用router.addRoutes(store.getters.addRouters)添加用户可访问的路由。
4.使用vuex管理路由表，根据vuex中可访问的路由渲染侧边栏组件。
image.png
网友评论