智慧社区项目开发（四）——前后端登录认证相关功能实现解析

在现代 Web 应用中，用户认证与授权是核心功能之一。本文将结合具体代码，解析用户登出、密码修改功能的实现，以及前端中与 Token 和路由相关的关键函数作用。

一、用户登出与密码修改功能实现

1. 登出功能

后端登出接口实现非常简洁：

@PostMapping("/logout")
public Result logOut(HttpSession session){
    session.invalidate();
    return Result.ok();
}

实现原理：

• 调用session.invalidate()方法使当前会话失效，清除会话中存储的所有用户信息
• 返回操作成功的统一响应格式

前端调用代码：

logout({ commit, state }) {
  return new Promise((resolve, reject) => {
    logout(state.token).then(() => {
      commit('SET_TOKEN', '')
      commit('SET_ROLES', [])
      removeToken()
      resetRouter()
      resolve()
    }).catch(error => {
      reject(error)
    })
  })
}

前端登出流程完整包含了清除本地存储的认证信息、重置应用状态和路由，确保用户完全退出系统。

2. 修改密码功能

后端修改密码接口实现：

@PutMapping("/updatePassword/")
public Result updatePassword(@RequestBody UpdatePasswordForm updatePasswordForm, HttpSession session){
    User user = (User)session.getAttribute("user");
    String Sessionpssword = user.getPassword();
    String oldpassword = SecureUtil.sha256(updatePasswordForm.getPassword());
    
    // 验证旧密码
    if(Sessionpssword.equals(oldpassword)){
        String newpassword = SecureUtil.sha256(updatePasswordForm.getNewPassword());
        user.setPassword(newpassword);
        if(userService.updateById(user)){
            return Result.ok().put("status","success");
        }
        return Result.error("更新密码失败");
    }
    return Result.ok().put("status","passwordError");
}

安全设计要点：

• 使用 SHA256 算法对密码进行加密处理，避免明文操作
• 先验证旧密码正确性，再进行密码更新
• 通过 session 获取当前登录用户，确保操作权限
• 清晰的状态返回，便于前端处理不同场景

接口参数包含原密码、新密码和确认密码，通过多层次验证保证密码修改的安全性。

二、前端关键函数解析：removeToken () 与 resetRouter ()

1. removeToken()

import Cookies from 'js-cookie'

const TokenKey = 'token'

export function removeToken() {
  return Cookies.remove(TokenKey)
}

功能详解：

• 封装了删除 Token 的操作，使用 js-cookie 库操作浏览器 Cookie
• 作用是清除存储在 Cookie 中的认证令牌
• 调用时机：用户登出、身份验证失败、Token 过期等场景
• 安全意义：确保用户退出后，本地不再保留有效的认证信息

2. resetRouter()

const createRouter = () => new Router({
  scrollBehavior: () => ({ y: 0 }),
  routes: constantRoutes
})

const router = createRouter()

export function resetRouter() {
  const newRouter = createRouter()
  router.matcher = newRouter.matcher // reset router
}

功能详解：

• 用于重置 Vue Router 实例的路由配置
• 实现原理是通过创建新的路由实例，替换现有实例的 matcher 属性
• 主要应用场景：
  • 用户登出时，清除动态添加的权限路由
  • 切换用户角色时，重新初始化路由配置
• 解决的问题：避免不同用户间路由配置的相互干扰，确保路由状态的干净初始化

三、登录功能中的 setToken 和 getToken

1. 核心实现

export function getToken() {
  return Cookies.get(TokenKey)
}

export function setToken(token) {
  return Cookies.set(TokenKey, token)
}

2. 回调场景与调用时机

登录成功后的调用流程：

1. 用户提交登录表单
2. 后端验证成功后返回 Token
3. 前端调用setToken(token)将 Token 存入 Cookie
4. 同时将 Token 存入 Vuex 状态管理：commit('SET_TOKEN', token)
5. 根据用户角色获取权限列表，动态生成路由
6. 跳转到应用首页

getToken () 的主要应用场景：

• 请求拦截器中获取 Token，添加到请求头：

  axios.interceptors.request.use(config => {
    if (getToken()) {
      config.headers['Authorization'] = getToken()
    }
    return config
  })
  

• 应用初始化时，检查是否存在有效 Token，实现自动登录
• 路由守卫中验证 Token 存在性，控制页面访问权限

setToken () 的关键作用：

• 持久化存储认证信息，避免页面刷新后登录状态丢失
• 通过 Cookie 存储可设置过期时间，实现自动登出
• 为后续 API 请求提供身份验证依据

这些函数共同构成了前端认证系统的基础，确保用户身份的正确验证和系统资源的安全访问。通过合理的 Token 管理和路由控制，可以有效提升应用的安全性和用户体验。