Vue美食杰登录

登陆注册时必要用到的是beforeEach全局路由守卫

逻辑思维如下：

                1.判断是否登录的状态，是否需要登录（在路由中设置一个状态为ture）

而需要登录时则进行下一步判断：

                                （1）判断是否已经登录过，如果登录过，则跳转

                                （2）如果没有登录，则跳转到登录页

                 2.不需要登录的时候直接跳转

        

 之后在设置登录注册的页面    使用element ui组件的from表单

 

 效果图如下：

 因为一些数据实在api的组件里设置好了，直接引入到组件调用接口，在组件提交中设置一个事件，调用api接口就可以了

注册页： 

登录页：

 

 为登陆组件的提交按钮设置点击事件，来调用接口和本地存储（localStorage.setItem("token"...))

如果打印出来的结果为后端设置的值，则为成功，如果值不是后端给的结果，说明没成功，则返回一个提示用户名或密码不正确

 在router中获取token值，如果有这个值则可以登录并且跳转，没有则跳转到登录页，

考虑到登录的安全性，调用api中的userinfo接口判断token是否合法，不合法跳转到登录页并删除token值，合法则next

 

 登出则是在退出标签绑定一个事件，拿api中的接口请求数据，引入到组件中的事件

用confirm方法，调用接口删除token值，之后跳转到根页面