如何用vue实现登录验证-js教程-PHP中文网

如何用vue实现登录验证

php中世界最好的语言

发布： 2017-12-30 17:59:51

原创

7526人浏览过

最这次给大家带来的是如何用vue实现登录验证，登录是我写完项目后加上的，一开始没有考虑到登录问题，后来加的，看了一些人分享的登录，感觉都太牛逼了，这篇文章就给大家好好分析一下。

使用的技术：

vue

vue-router

vuex

立即学习“前端免费学习笔记（深入）”；

首先明确的一点vue是一个写但页面的框架，以前在做登录的时候，也许是后端来控制登录的状态，把登陆的信息会放在cookie里。前端也可以做登录验证的，这主要是基于但页面引入路由的功能得以实现的。

在vue-router里有个钩子函数 beforeEach （导航守卫）多霸气的名字，故名YY就是这是我家没我的邀请名片都给我滚蛋，还想过来和我一起看苍老师。beforeEach 接受三个参数（to, from, next）分别是to: 小伙要去哪里， from: 小伙从那里来， next: 美女您请进，小心路滑啊。姑且你们认为我写的很形象啊，如果你感到不服去看文档啊！

理解里 beforeEach 那我们就可以区搞事情了。基本的思路是：

我要从router的信息里面拿到 meta 用户的源信息，如果没有就让这屌丝滚蛋，收拾帅气点再来（也就是去登录）

如果没有源信息的话，就等跳到 igeekbar 裙里来瞅瞅，拿到入场圈（也就是登录后拿到了返回结果并存在router的源信息中，用于之后路由跳转的验证）

写到这里突然感觉这貌似谁都懂的啊，不管了写这么多，就当你是小白吧（哈哈哈）

下面直接上代码:

Smile企业费用管理系统源码1.0

一、源码特点企业费用管理系统，有权限分配，登陆验证，新增角色，发布公告等二、功能介绍1、js的兼容性有个地方不行（比如模块排序，那个时候也是雏鸟一只，写了一小撮，现在用jq应该好处理的吧，ie里面没问题，大家发挥吧）2、里面的菜单和对应菜单下面的目录项可以根据需求自己添加的，有对应模块3、可以根据自己设定的角色添加对应的访问页面4、有些操作涉及到按钮权限，对于这种思路，我粗粗的写了2个自定义控件，

查看详情

在 router.js 路由中添加一下代码

// router.js
router.beforeEach((to, from, next) => {
 if (!to.meta.user) {
  // todo 请求接口获取数据
  loadUserData().then(user => {
   // 存放源信息
   to.meta.user = user
   // 存在 vuex 中
   store.state.user = user
   if(user){
    next()
   }else{
    next({
     path: '/'
    })
   }
  })
 } else {
  next()
 }
})

登录后复制

统一处理接口的文件api.js

// api.js
import axios from 'axios'
  
// 封装ajax 的 fetch
export let fetch = (method, url, data, forceLogin = true) => {
 return new Promise((resolve, reject) => {
  axios({
   ...data,
   method: method,
   url: url
  }).then(response => {
   resolve(response.data)
  }).catch(err => {
   reject(err)
  })
 })
}
// 获取用户信息
export let loadUserData = () => {
 return new Promise((resolve, reject) => {
  let user = null
  let cacheKey = 'authUserJsonStr'
  let authUserJsonStr = sessionStorage.getItem(cacheKey)
  if (authUserJsonStr) {
   user = JSON.parse(sessionStorage.getItem(cacheKey))
   resolve(user)
  } else {
   fetch('GET', '/api/auth_info/', {}, false).then((data) => {
    user = data
    sessionStorage.setItem(cacheKey, JSON.stringify(user))
    resolve(user)
   }).catch(() => {
    resolve(null)
   })
  }
 })
}

登录后复制

相信看了以上介绍你已经掌握了方法，更多精彩请关注php中文网其它相关文章！