这篇文章主要是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)
})
以上是对接后端登录的关键代码，请参考，其余部分自己实现。