grails+vue.js（三）client权限验证

Client使用axios封装请求，在请求发送前拦截添加Headers，在接收到响应后进行拦截判断。

1. npm安装依赖
   npm install axios -S
2. 创建request.js实现对request和response的拦截处理

import axios from 'axios'
import router from '../router'

// 创建axios实例
const service = axios.create({
  baseURL: process.env.SERVER_URL, // api 的 base_url   process.env.BASE_API
  timeout: 5000 // 请求超时时间
})

// request拦截器
service.interceptors.request.use(config => {
  if (!config.headers['Content-Type']) {
    config.headers['Content-Type'] = 'application/json'
  }
  if (localStorage.getItem(this.tokenKey) && typeof localStorage.getItem(this.tokenKey) !== 'undefined' && JSON.parse(localStorage.getItem(this.tokenKey)).access_token) {
    config.headers['Authorization'] = `Bearer ${JSON.parse(localStorage.getItem(this.tokenKey)).access_token}` // 让每个请求携带自定义token 请根据实际情况自行修改
  }
  return config
},
error => {
  Promise.reject(error)
})

// response 拦截器
service.interceptors.response.use(response => {
  if (response.status >= 200 && response.status < 300) {
    return response.data
  } else {
    let error = new Error(response.statusText)
    error.response = response
    return Promise.reject(error)
  }
},
error => {
  if (error.response && error.response.status === 401) {
    localStorage.removeItem(this.tokenKey)
    router.replace({
      path: '/login'
    })
  } else {
    return Promise.reject(error)
  }
})

export default service

3. 配置路由拦截验证
   路由拦截验证用router.beforeEach( (to, from, next) => { } ），to代表要去的路由指向，from是指从哪个路由跳转过来的，next是判断操作，如果为空，表示放行。
   修改main.js

import Vue from 'vue'
import App from './App'
import router from './router'
import * as uiv from 'uiv'
import './assets/css/bootstrap.css'
import './assets/css/grails.css'
import './assets/css/main.css'

Vue.config.productionTip = false
Vue.config.tokenKey = 'JWT-Token'

// 路由拦截验证
router.beforeEach((to, from, next) => {
  if (to.meta.requireAuth) {
    if (localStorage.getItem(this.tokenKey)) {
      next()
    } else {
      next({
        path: '/login',
        query: {redirect: to.fullPath}
      })
    }
  } else {
    next()
  }
})

Vue.use(uiv)
/* eslint-disable no-new */
new Vue({
  el: '#app',
  router,
  components: { App },
  template: '<App/>'
})

4. 创建项目时生成了Welcome组件，现在创建一个Login组件

<template>
  <div>
    <input type="text" v-model="username" placeholder="用户名">
    <input type="password" v-model="password" placeholder="密码">
    <button v-on:click="doLogin">登录</button>
  </div>
</template>

<script>
import router from '../router'
import request from '../utils/request'

export default {
  name: 'Login',
  data () {
    return {
      username: null,
      password: null
    }
  },
  methods: {
    doLogin: function () {
      if (!this.username || !this.password) {
        alert('请输入用户名和密码')
      } else {
        request({
          url: '/api/login',
          method: 'POST',
          data: JSON.stringify({ username: this.username, password: this.password })
        }).then(json => {
          if (json && typeof json !== 'undefined') {
            localStorage.setItem(this.tokenKey, JSON.stringify(json))
            router.push({
              name: 'Welcome'
            })
          } else {
            alert('登录失败')
          }
        }).catch(error => {
          console.log(error.message)
        })
      }
    }
  }

}
</script>

3. 修改Welcome.vue

<script>
import request from '../utils/request'

export default {
  name: 'Welcome',
  data () {
    return {
      msg: 'Welcome to Your Grails & Vue.js App',
      serverInfo: null,
      showLinks: false,
      serverURL: process.env.SERVER_URL
    }
  },
  methods: {
    toggleLinks: function () {
      this.showLinks = !this.$data.showLinks
    },
    fetchInfo: function () {
      request({
        url: '/application/index',
        method: 'POST',
        data: JSON.stringify({})
      }).then(json => {
        this.serverInfo = json
      }).catch(error => console.log(error.message))
    }
  },
  created: function () {
    this.fetchInfo()
  }
}
</script>

4. 同时启动server和client，访问client，因为没有登录，会跳转到登录页面，如下图：

   
   login.png
   

   输入错误的用户名密码，提示“登录失败”，如下图：

   
   fail.png
   输入正确的用户名密码，跳转到welcome页面，如下图：
   success.png