OAuth自动刷新续签Token

ruoyi-gateway/src/main/java/com/ruoyi/gateway/filter/ValidateCodeFilter.java

@@ -31,6 +31,10 @@ public class ValidateCodeFilter extends AbstractGatewayFilterFactory<Object>
     private static final String CODE = "code";
 
     private static final String UUID = "uuid";
+    
+    private static final String GRANT_TYPE = "grant_type";
+    
+    private static final String REFRESH_TOKEN = "refresh_token";
 
     @Override
     public GatewayFilter apply(Object config)
@@ -43,6 +47,13 @@ public class ValidateCodeFilter extends AbstractGatewayFilterFactory<Object>
             {
                 return chain.filter(exchange);
             }
+            
+            // 刷新token请求，不处理
+            String grantType = request.getQueryParams().getFirst(GRANT_TYPE);
+            if (StringUtils.containsIgnoreCase(request.getURI().getPath(), AUTH_URL) && StringUtils.containsIgnoreCase(grantType, REFRESH_TOKEN))
+            {
+                return chain.filter(exchange);
+            }
 
             // 消息头存在内容，且不存在验证码参数，不处理
             String header = request.getHeaders().getFirst(HttpHeaders.AUTHORIZATION);

ruoyi-ui/src/api/login.js

@@ -2,11 +2,11 @@ import request from '@/utils/request'
 
 const client_id = 'web'
 const client_secret = '123456'
-const grant_type = 'password'
 const scope = 'server'
 
 // 登录方法
 export function login(username, password, code, uuid) {
+  const grant_type = 'password'
   return request({
     url: '/auth/oauth/token',
     method: 'post',
@@ -14,6 +14,16 @@ export function login(username, password, code, uuid) {
   })
 }
 
+// 刷新方法
+export function refreshToken(refresh_token) {
+  const grant_type = 'refresh_token'
+  return request({
+    url: '/auth/oauth/token',
+    method: 'post',
+    params: { client_id, client_secret, grant_type, scope, refresh_token }
+  })
+}
+
 // 获取用户详细信息
 export function getInfo() {
   return request({

ruoyi-ui/src/store/modules/user.js

@@ -1,9 +1,10 @@
-import { login, logout, getInfo } from '@/api/login'
+import { login, logout, getInfo, refreshToken } from '@/api/login'
-import { getToken, setToken, removeToken } from '@/utils/auth'
+import { getToken, getRefreshToken, setToken, setRefreshToken, setExpiresIn, removeToken } from '@/utils/auth'
 
 const user = {
   state: {
     token: getToken(),
+    refresh_token: getRefreshToken(),
     name: '',
     avatar: '',
     roles: [],
@@ -14,6 +15,12 @@ const user = {
     SET_TOKEN: (state, token) => {
       state.token = token
     },
+    SET_EXPIRES_IN: (state, time) => {
+      state.expires_in = time
+    },
+    SET_REFRESH_TOKEN: (state, token) => {
+      state.refresh_token = token
+    },
     SET_NAME: (state, name) => {
       state.name = name
     },
@@ -39,6 +46,10 @@ const user = {
         login(username, password, code, uuid).then(res => {
           setToken(res.access_token)
           commit('SET_TOKEN', res.access_token)
+          setRefreshToken(res.refresh_token)
+          commit('SET_REFRESH_TOKEN', res.refresh_token)
+          setExpiresIn(res.expires_in)
+          commit('SET_EXPIRES_IN', res.expires_in)
           resolve()
         }).catch(error => {
           reject(error)
@@ -67,6 +78,23 @@ const user = {
       })
     },
     
+    // 刷新token
+    RefreshToken({commit, state}) {
+      return new Promise((resolve, reject) => {
+        refreshToken(state.refresh_token).then(res => {
+          setToken(res.access_token)
+          commit('SET_TOKEN', res.access_token)
+          setRefreshToken(res.refresh_token)
+          commit('SET_REFRESH_TOKEN', res.refresh_token)
+          setExpiresIn(res.expires_in)
+          commit('SET_EXPIRES_IN', res.expires_in)
+          resolve()
+        }).catch(error => {
+          reject(error)
+        })
+      })
+    },
+    
     // 退出系统
     LogOut({ commit, state }) {
       return new Promise((resolve, reject) => {

ruoyi-ui/src/utils/auth.js

@@ -2,6 +2,10 @@ import Cookies from 'js-cookie'
 
 const TokenKey = 'Admin-Token'
 
+const RefreshTokenKey = 'Admin-Refresh-Token'
+
+const ExpiresInKey = 'Admin-Expires-In'
+
 export function getToken() {
   return Cookies.get(TokenKey)
 }
@@ -13,3 +17,27 @@ export function setToken(token) {
 export function removeToken() {
   return Cookies.remove(TokenKey)
 }
+
+export function getRefreshToken() {
+  return Cookies.get(RefreshTokenKey) || ``
+}
+
+export function setRefreshToken(token) {
+  return Cookies.set(RefreshTokenKey, token)
+}
+
+export function removeRefreshToken() {
+  return Cookies.remove(RefreshTokenKey)
+}
+
+export function getExpiresIn() {
+  return Cookies.get(ExpiresInKey) || -1
+}
+
+export function setExpiresIn(time) {
+  return Cookies.set(ExpiresInKey, time)
+}
+
+export function removeExpiresIn() {
+  return Cookies.remove(ExpiresInKey)
+}

ruoyi-ui/src/views/index.vue

@@ -35,6 +35,7 @@ import LineChart from './dashboard/LineChart'
 import RaddarChart from './dashboard/RaddarChart'
 import PieChart from './dashboard/PieChart'
 import BarChart from './dashboard/BarChart'
+import { getToken, getExpiresIn, setExpiresIn } from '@/utils/auth'
 
 const lineChartData = {
   newVisitis: {
@@ -66,12 +67,39 @@ export default {
   },
   data() {
     return {
+      //刷新token锁
+      refreshLock: false,
+      //刷新token的时间
+      refreshTime: '',
       lineChartData: lineChartData.newVisitis
     }
   },
+  created() {
+    this.refreshToken()
+  },
   methods: {
     handleSetLineChartData(type) {
       this.lineChartData = lineChartData[type]
+    },
+    // 实时检测刷新token
+    refreshToken() {
+      this.refreshTime = setInterval(() => {
+        if (null === getToken()) {
+          return;
+        }
+        const expires_in = getExpiresIn();
+        if (expires_in <= 1000 && !this.refreshLock) {
+          this.refreshLock = true
+          this.$store
+            .dispatch('RefreshToken')
+            .catch(() => {
+              clearInterval(this.refreshTime)
+            });
+          this.refreshLock = false
+        }
+        this.$store.commit("SET_EXPIRES_IN", expires_in - 10);
+        setExpiresIn(expires_in - 10);
+      }, 10000);
     }
   }
 }