在项目中从登录到主页的整个过程

 

1. 在登录页面(login/index.vue),输入账号和密码, 点击登录按钮, 进行兜底校验, 校验通过后发送登录请求, 使用this.$store.dispatch调用封装在(store/modules/user.js)中的actions中的登录请求
2. 登录请求封装在(api/user.js)中, 登录成功后提示用户(登录成功), 将接口返回的token保存到本地和vuex/state中,
3. 在(utils/request.js)中有接口的基地址和请求拦截器, 在请求拦截器中拦截请求, 并判断有没有拿到token, 如果拿到了token, 就将token携带在请求头中, 根据接口需求看需不需要在token前面拼接字符串
4. 登录完成并保存token后, 需要跳转到首页, 而跳转到首页又需要经过封装在(permission.js)中的"导航守卫", 前置导航守卫的功能: 1. 在每次跳转到下一个页面之前进行拦截, 比如跳转到首页, 需要判断有没有token, 如果有, 就可以跳转到首页, 并在跳转之前发出一个请求(获取用户特殊的信息, 例如: 头像, 名称, 等级权限)以便渲染到首页. 如果没有token, 就判断是否去的是白名单内的地址(例如:登录页,注册页.404页面), 如果是的话, 也可以放行, 其他情况就需要直接拦截到登录页.