vue利用路由控制实现登录功能

未使用服务器接口，登录信息保存在cookie中，可以实现登录功能
vue交流群203849104

vue使用cookie首先需要安装cookie

npm install js-cookie

然后在router下面的index.js文件中引入

import cookies from 'js-cookie'

增加路由权限

router.beforeEach((to, from, next) => {
  iView.LoadingBar.start()
  if (to.name === 'login') {
    var gourl = '/'
  } else {
    gourl = to.path
  }

  var user = typeof (cookies.get('user'))
  if (to.name === 'login' || to.name === 'register') {
    if (to.meta.title) {
      document.title = to.meta.title
    }
    next()
  } else {
    if (user === 'undefined') {
      router.replace({
        name: 'login',
        query: {redirect: gourl}
      })
    } else {
      window.scrollTo(0, 0)
      if (to.meta.title) {
        document.title = to.meta.title 
      }
      next()
    }
  }
})

router.afterEach(route => {
  iView.LoadingBar.finish()
})

router.beforeEach 是页面加载之前，相反router.afterEach是页面加载之后
这里的gourl 是登陆页面之前的页面，用于登录之后跳转到上一页面，这一点在应用开发中应用的也是比较广泛的，尤其是互动性比较强的应用。
typeof (cookies.get(‘user’)) 是用户cookie保存的用户信息，这里写的比较简单 判断了是否为字符串，可以根据需求自己来写
如果获取cookie中user的值不为string，则页面跳转到登录界面。

loginaction () {
      var redirect = this.$route.query.redirect
      this.$http.post(api.url.login, this.inputval, {emulateJSON: true}).then(
        (response) => {
          if (response.data.code === 'ok') {
            cookies.set('user', response.data.data)
            this.$router.push({ path: redirect })
          } else {
            this.$Message.error(response.data.msg)
          }
        },
        (error) => {
          console.log(error)
        })
    }

loginaction 方法是登录按钮的点击事件
api.url.login 是post请求地址可以换成自己的地址
this.inputal是输入框输入的信息
请求接口返回code为OK则表示登录成功将返回的数据写入cookie中即可
redirect 是登录页面的redirect 参数，也就是跳转到登录页面前一页的地址，那么登录之后还是返回到登录之前的页面。