2023-09-19  阅读(153)
原文作者:墨家巨子@俏如来 原文地址: https://blog.csdn.net/u014494148/article/details/109348225

前言

这一章节我们考虑对接一下前端页面的登录,我这里采用的是比较经典的架构“前后端分离”,前端是VUE+ElementUI实现

1.前端登录

1.1.方案分析

后端没什么说的,跟之前文章中一样,你需要搭建独立的认证中心,其他的微服务做为资源服务即可,对于前台登录首先少不了账号密码登录模式,所以我们的方案可以这样,前台直接封装请求向认证中心获取Token可以使用“password”模式,然后把Token存储到SessionStorage中,请求资源的时候给Header添加上Token即可.

1.2.前端获取Token

使用“password”模式请求Token,如下:

    var param = "username=zs&password=123&client_id=system&client_secret=123&grant_type=password";
    //请求参数的内容格式为普通方式,否则默认使用JSON格式提交参数
    var config={
        headers: {'Content-Type': 'application/x-www-form-urlencoded'}
    };
    
    this.$http.post("/auth/oauth/token",param,config).then(res=>{
        //获取到Token
        var token = res.data.access_token;
        var refresh_token = res.data.refresh_token;
    
        //把token存储起来
        sessionStorage.setItem("U-TOKEN",token);
        sessionStorage.setItem("R-TOKEN",refresh_token );
        sessionStorage.setItem("user",'{"username":"zs"}');
        //修改登录成功后跳转到首页
        this.$router.push({ path: '/main' });
        this.logining = false;
        return;
    }).catch(error => {
        this.$message.error(error.message);
        this.logining = false;
        return;
    });

这里 Content-Type 设置为 application/x-www-form-urlencode ,发送请求到认证中心获取Token,然后存储Token

当然您可以会觉得这样去带参数会暴露 client_secret 秘钥,那你可以稍作修改,就是做一个登陆接口,前台只带着用户名和密码去登陆,在登录接口中获取client_id和client_secret 加上参数中的用户名和密码组装成完整的URL使用HTTP调用认证中心的令牌获取接口获取令牌,然后返回给客户端,比如:

     	var loginParams = { username: "zs", password: "123",clientId:"system"};
                //发起请求 http://localhost:1020/hrm/auth/auth/oauth/token?
         this.$http.post("/auth/login/accessToken",loginParams).then(res=>{
             //获取到Token
             var token = res.data.resultObj.access_token;
             var refresh_token = res.data.resultObj.refresh_token;
             //把token存储起来
             sessionStorage.setItem("U-TOKEN",token);
             sessionStorage.setItem("R-TOKEN",refresh_token);
             sessionStorage.setItem("user",'{"username":"zs"}');
             //修改登录成功后跳转到首页
             this.$router.push({ path: '/main' });
             this.logining = false;
             return;
         }).catch(error => {
             this.$message.error(error.message);
             this.logining = false;
             return;
         });

后台登录代码

     @Override
        public AjaxResult login(Login login) {
    
            ValidUtils.assertNotNull(login.getUsername(),"用户名不可为空");
            ValidUtils.assertNotNull(login.getPassword(),"密码不可为空");
            ValidUtils.assertNotNull(login.getClientId(),"clientId不可为空");
    
            //String urlAccessToken = "%s/oauth/token?username=%s&password=%S&client_id=%S&client_secret=%s&grant_type=password"
            //组装获取Token的Url
            String accessTokenUrl = String.format(AuthConstants.URL_ACCESS_TOKEN,
                    oauthProperties.getAuthServerUrl(),	//获取令牌地址
                    login.getUsername(),	//用户名
                    login.getPassword(),	//密码
                    login.getClientId(),	//客户端ID
                    oauthProperties.getSecrectByClentId(login.getClientId()));	//秘钥
      
    			//发送Http请求获取Token,返回给浏览器
                  return  AjaxResult.me().setResultObj(HttpUtil.sendPost(accessTokenUrl));

1.3.请求头添加Token

使用Axios拦截器给请求头添加Token,如下:

    axios.interceptors.request.use(config => {
        //如果已经登录了,每次都把token作为一个请求头传递过程
        if (sessionStorage.getItem('U-TOKEN')) {
            // 让每个请求携带token--['X-Token']为自定义key 请根据实际情况自行修改
            config.headers['Authorization'] = "Bearer "+sessionStorage.getItem('U-TOKEN')
        }
        return config
    }, error => {
        // Do something with request error
        Promise.reject(error)
    })

这样一来,每次发送请求都会在请求头中携带Token了,请求到了网关层就会对Token进行校验

2.Token无感刷新

2.1.方案分析

如果Token过期怎么办?Token过期请求会失败出现401错误,

  1. 解决方案一:可以通过Axios的后置拦截器拦截到401错误直接弹出窗口要求用户去登录,当然这种方式对用户体验不是很好。
  2. 方案二:可以在服务器端比如zuul中做授权失败的处理器,发现是401异常就自动向认证中心发送Token刷新请求,然后把新的Token写回客户端(比如通过cookie),接着重新转发失败的请求
  3. 方案三:可以在前端做文章,通通过Axios的后置拦截器拦截到401错误,然后同步发送刷新Token的请求重新得到Token,把Token重新存储到SessionStorage,然后重新转发失败的请求,请求头携带新的Token

后面两种都可以实现Token无感刷新,第三种方案更适合前后端分离项目

2.2.后置拦截器

Axios响应拦截器拦截401异常

    axios.interceptors.response.use(config => {
        return config
    },error => {
        if (error && error.response) {
            switch (error.response.status) {
                case 401: return doRequest(error);
            }
        }
        Promise.reject(error)
    });

如果是401异常,说明Token过期了,同步发送刷新Token请求,刷新TokenURL是

    /auth/oauth/token?client_id=system&client_secret=123
    &grant_type=refresh_token&refresh_token=刷新Token

刷新Token是需要带着上一次获取Token返回的refresh_token值,所以在登录成功后除了要保持Token还要保存refresh_token

刷新Token请求如下:

    async function doRequest (error) {
        try {
        	//刷新Token请求
            const data = await getNewToken();
            var token = data.data.access_token;
            var refresh_token = data.data.refresh_token;
            //重新设置Token
            sessionStorage.setItem("U-TOKEN",token);
            sessionStorage.setItem("R-TOKEN",refresh_token);
            console.log("刷新Token:"+token);
            //继续请求之前未完成的请求
            const res = await axios.request(error.config);
            return res;
        } catch(err) {
            alert("登录失效,请重新登录");
            sessionStorage.clear();
            router.replace({ path:"/login" });
            return err;
        }
    }
    
    async function getNewToken() {
    	//获取到保存的refresh_token值
        var refreshToken = sessionStorage.getItem('R-TOKEN');
        //这里要发送同步请求
        return await axios({
            url: '/auth/oauth/token?client_id=system&client_secret=123&grant_type=refresh_token&refresh_token='+refreshToken,
            method: 'post',
            headers: {
                'Content-Type':'application/x-www-form-urlencoded'
            }
        })
    }

同步方式获取到新的Token,重新存储到sessionStorage中,然后调用axios.request继续执行之前的请求,这一次请求头中带的就是新的Token

3.总结

到这里就结束了,这里介绍了两个内容,一个是使用“password”授权模式基于账号密码的登录,二个是基于前端的Token刷新,当然对于短信登录,邮件登录,三方登录肯定有所不一样,这里暂不讨论,希望文章对你有所帮助

阅读全文
  • 点赞