美食杰登录(路由守卫)

Ther. 飞

已于 2022-03-13 19:48:17 修改

阅读量1.4k

点赞数

文章标签： javascript 前端开发语言

于 2022-03-13 16:17:56 首次发布

本文链接：https://blog.csdn.net/m0_66482551/article/details/123460093

版权

登录注册的功能逻辑：beforEach
有些路由时需要登录状态的，判断登录状态(是否需要登录)
不需要登录的，直接跳转
需要登录的：进入下一步判断：
a. 判断是否已经登录，如果以及登录，直接跳转
b. 判断是否已经登录，如果没有登录，跳转到登录页

先在router的的jindex.js里在路由最后暴露之前设置路由前置守卫,并判断组件哪些带有,"路由元素信息" 如果有就需要登录带才可以访问呢个页面,如果没有就不需要登录就可以访问

我们先设置登录与注册页的布局,直接使用饿了么的element-ui组件的From表单

这个是from表单的双向绑定与正则方法

之后就可以出来效果图 :

这里注意因为我的登录与注册组件都通过引入到一个页面了所以会同时出现登录与注册

之后先注册因为在api的组件里我们已经设置好了,我们直接引入到注册的组件里调用即可在注册的组件里在提交按钮里设置一个事件之后直接调用api的接口就可以啦

注册完成之后会返回一个code为0的码号,并提示已创建完成

之后就直接登录里调用api的登录接口

也为登录组件的提交按钮添加一个点击事来调用接口和设置localStorage.setItem('token',....),并且token值为调用接口里的属性为token的属性值,不过前提是code码是0,如果是0,代表成功直接跳到根页面,如果code为1,说明没成功就提示他用户名或用户密码不正确

之后在router组件的路由守卫里获取token值,如果有token就可以登录并跳转,如果没有就跳转到登录页面,但考虑一点如果随便在localStroage里设置一个token值不也可以登录并跳转,所以要,调用api的userInfo接口来判断token是否合法,如果不合法跳转到登录页面,并删除在localStorage的token值 return出去,如果合法直接next()

详细如下图:

之后登录之后就该写退出登录啦,在退出的标签里绑定一个事件,还是拿api的接口请求数据,引入到组件中在事件里用$confirm方法,调用接口删除localStorage.removeItem('token') 跳转到根页面如图:

登录之后'用户头像以及编辑退出' 出现 "登录注册" 消失,没登录则相反

这里要考虑组件通讯问题所以使用vuex 来写

之前在router的index里判断token值是否合法,其实就是获取的用户信息,只是后端对他进行了处理,先在router引入vuex的store,并在判断token值是否合法是通过store.commit('chnageUserInfo',data.data)来调用vuex的方法把数据赋值给vuex中state中的userInfo ,vuex上的getters方法,是判断state中的userInfo是否有长度如果有则返回true,如果没有则返回false

之后把vuex的gettets的方法和state的userInfo数据传为hander组件在hander组件通过computed来接收,原因是computed他可是时时更新