OAuth网络安全登录认证（三）

这篇文章主要是vue前端内容，对接后端进行登录认证。对应这上一篇springsecurity认证，包括以后的系列文章中会有的spring-security-oauth2后端认证，同样都适用。

跟上一篇一样，首先先说用户登录，我们需要调用后端的登录接口，然后把返回的token信息，存储在在cookie中。因为后边项目中我们其他地方（比如登出lagout操作）可能需要直接获取token，我们需要把token写入到全局存储store中。下边是登陆方法：

Login({ commit }, userInfo) {
  const username = userInfo.username.trim()//用户名
  const password = userInfo.password           //密码
  return new Promise((resolve, reject) => {
    login(username, password).then(res => {
      setToken(res.token)                    //token存入store中
      commit('SET_TOKEN', res.token)//token存入cookie
      resolve()
    }).catch(error => {
      reject(error)
    })
  })
},

然后在登录的地方直接调用store里的登录方法。

this.$store.dispatch("Login", this.loginForm).then(() => {
  //登录成功之后跳转至首页
  this.$router.push({ path: this.redirect || "/" }).catch(()=>{});
}).catch(() => {
  //异常处理逻辑
});

下边是前端跳转路由的时候对token认证的一些处理，路由的钩子函数beforeEach从cookie中取token，每次跳转之前走beforeEach函数，判断token是否存在，不存在，跳登录页，存在则拉取用户信息，添加动态路由，并跳转。以下是对应代码。

router.beforeEach((to, from, next) => {
  NProgress.start()
  if (getToken()) {//判断cookie是否有token
    if (to.path === '/login') {
      next({ path: '/' })
      NProgress.done()
    } else {
      if (store.getters.roles.length === 0) {
        // 判断当前用户是否已拉取完user_info信息，获取路由信息
        router.addRoutes(accessRoutes) // 动态添加可访问路由表
        next({ ...to, replace: true }) // hack方法 确保addRoutes已完成
      } else {
        next()
      }
    }
  } else {
    // 没有token
      next(`/login`) // 否则全部重定向到登录页
      NProgress.done()
  }
})

最后也是最重要的，就是前端对后端进行接口请求的时候需要带上token进行访问，前端接口很多，每一个请求都加token的话，工作量大，而且是个很繁琐的工作，对开发不利。需要把请求封装一下，每个请求调用的时候自动添加token请求头，用的是axIOS组件封装请求。

// 创建axios实例
const service = axios.create({
  // axios中请求配置有baseURL选项，表示请求URL公共部分
  baseURL: process.env.VUE_App_BASE_API,
  // 超时
  timeout: 10000
})

// request拦截器
service.interceptors.request.use(config => {
  // 是否需要设置 token
  const isToken = (config.headers || {}).isToken === false
  if (getToken() && !isToken) {
    config.headers['Authorization'] = 'Bearer ' + getToken() // 让每个请求携带自定义token 请根据实际情况自行修改
  }
  // get请求映射params参数
 	 //此处代码省略，仅作token讲解
  return config
}, error => {
    console.log(error)
    Promise.reject(error)
})

以上是对接后端登录的关键代码，请参考，其余部分自己实现。