这些都是在vue里面实现的前端路由
首先在路由配置里面给他自定义一个属性比如meta,放在路由的对象里面做标记,meta里面给他定义一个对象,对象里面有autu键,对应的是一个布尔值,默认给他true,路由数组里面匹配了很多的路由对象,这时候有些页面不需要登录也可以访问,这时候给需要登录才能访问的页面给他加上一个meta这样的一个标记,里面有auth为true,这说明这个需要登录才能访问,这时候在路由守卫里面做判断,在路由文件里面给所有的路由做一个全局前置守卫befouteEach,这个方法里面传入一个函数,函数有三个参数,分别为to,from,next,在函数内部,我给他判断是否有to.meta.auth,如果没有我直接返回next()让他访问这个页面,如果有,说明这个页面需要被登录才能访问,这时候我定义一下token=localStorage.getItem("token") 如果token能拿到,说明这个是登录的,我就放行继续next(),如果没有拿到我直接给他跳转到登录页面,并且这里做了一个小优化,把准备要访问的这个页面通过query存储到地址栏并且跳回到登录页面,这时候如果登录成功返回原本要访问的需要登录的页面,这样可以增加用户体验。
在登录页面,这里不管他用的QQ登第三方登录方式或者短信登陆这样,因为这涉及到接口的不同,逻辑是一样的,这里说一下账户密码这样的登陆方式,因为点击登陆向后台发送请求这是一个异步的操作,所以说如果利用vuex这个请求需要放在action里面去进行操作请求这部分的逻辑,首先点击登陆会进行表单校验,判断密码长度,判断用户名是不是手机号码或者是邮箱的形式,OK,校验成功,我去触发事件,这个事件会去this.$store.dispath那个action去进行异步操作,这时候我们一般都把fetch或者axios请求都进行模块化开发,放在一个类似service这个目录里面进行模块化开发,这里面导入了axios等发送请求的文件,把所有请求都封装成一个js文件里面并且导出,然后在store.js里面导入这个文件,并且在action里面进行使用导入的登录的请求方法,参数是之前点击登陆时候传出的用户账号密码信息,这里面生成一个promise对象,通过async和await进行获取res,一般都是返回的data里面有一个状态码和一个登录状态的信息,如果状态码是准确的则跳转到之前我在地址栏记录的那个查询路径,并且触发mutation里面的方法通过commit把vuex里面的state状态改成登录状态,并且返回这个code,因为我需要在登录页面里面dispatch里面再进行.then通过返回来的code进行做页面跳转,如果返回的代码正确(这个vuex里面的判断是否登录了的数值本来就是一个方法,键值就是用三元运算符计算的localStorage.getItem('token'),如果有就是true,如果没有就是false,这里对token的正确与否不进行验证,因为这是后端需要进行的操作,如果发送请求的时候携带的token不是对应正确的token,这时候服务器那边会进行报错处理,并且通知前端,前端拿到错误信息,进行跳转到登录页面,这时候类似token过期失效了一样),同时可以通this.$route.query.name拿到那个路径,要做一个判断如果没有这个就跳转到主页,如果发生错误,那就做一些操作查看一下返回的信息,做一个提示。

补充一下,怎么判断token过期问题或者是伪造的token更或是没有token等问题呢,这时候就要在路由里面设置一个响应拦截器axios.interceptors.response.use()里面有一个函数,函数有两个参数,第一个成功,第二个失败,这时候调用第二个参数,判断后台返回的响应码,这个错误响应码一般是401,判断err.response.status是不是等于401,如果等于401,则做两件事,清空vuex里面的登录状态为false,第二个跳转到登录页面

Last modification:October 14, 2019
If you think my article is useful to you, please feel free to appreciate