江苏龙网

  1. 主页 > 生活百科 > >

三 OAuth网络安全登录认证

小知识

这篇文章主要是vue前端内容，对接后端进行登录认证 。对应这上一篇springsecurity认证，包括以后的系列文章中会有的spring-security-oauth2后端认证，同样都适用 。
【三 OAuth网络安全登录认证】跟上一篇一样，首先先说用户登录，我们需要调用后端的登录接口，然后把返回的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存入cookieresolve()}).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是否有tokenif (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 {// 没有tokennext(`/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 => {// 是否需要设置 tokenconst isToken = (config.headers || {}).isToken === falseif (getToken() && !isToken) {config.headers['Authorization'] = 'Bearer ' + getToken() // 让每个请求携带自定义token 请根据实际情况自行修改}// get请求映射params参数//此处代码省略，仅作token讲解return config}, error => {console.log(error)Promise.reject(error)})以上是对接后端登录的关键代码，请参考，其余部分自己实现 。




    推荐阅读


    上一篇：css加载loading效果的片段

    下一篇：一 OAuth网络安全登录认证