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 參數，也就是跳轉到登錄頁面前一頁的地址，那麼登錄之後還是返回到登錄之前的頁面。