完整版pc端vue+element-ui登录鉴权思路

登录模块

思路:

1. 用户输入用户名+密码+滑块验证+手机验证码进行登录。
2. 后端会记录下ip段,同时根据用户名和密码生成token。
3. 登录成功后,缓存用户信息,用user_id去获取token,缓存token,设置过期时间。
4. 之后每次请求api都需要携带token,并后端和前端都需要校验token是否过期。

注册模块

思路

1. 用户输入手机号,失焦去异步请求,判断该手机号是否可用。
2. 手机号+密码+确认密码+滑块验证+手机验证码进行注册。
3. 后端记录ip段, 并返回用户信息。
4. 注册成功,缓存用户信息,用user_id去获取token,缓存token，设置过期时间。

500页面

思路

1. 500页面出现在网络请求超时和响应后台返回500。
2. 在axios中设置请求响应拦截器,响应失败和后台返回状态码为500的跳转500网络开小差页面。

404页面

思路

1. 非法(乱输)路由地址都重定向到404页面。

路由守卫

思路

1. 判断缓存中有没有token
2. token过期重新获取token并强行刷新
3. token不过期,判断有没有登录, 如果没有登录,不可进入黑名单{ 例如:个人中心,购物车,收藏等不登录无权访问的页面 }, 登录可进入所有页面
4. 没有token重新请求token