Spring Boot + Vue授权查看信息

在Spring Boot和Vue.js结合的项目中，要实现基于角色的授权查看信息，可以使用Spring Security和Vue Router来控制页面的访问权限。

以下是一个简化的例子：

Spring Security配置：

@Configuration
@EnableWebSecurity
public class SecurityConfig extends WebSecurityConfigurerAdapter {
 
    @Override
    protected void configure(HttpSecurity http) throws Exception {
        http
            // ... 其他配置
            .authorizeRequests()
            .antMatchers("/", "/home", "/about").permitAll()
            .antMatchers("/user/**").hasRole("USER")
            .antMatchers("/admin/**").hasRole("ADMIN")
            .and()
            .formLogin()
            // ... 其他登录配置
            .and()
            .logout()
            // ... 其他注销配置
            .and()
            .exceptionHandling()
            // ... 异常处理配置
            ;
    }
 
    @Autowired
    public void configureGlobal(AuthenticationManagerBuilder auth) throws Exception {
        auth
            .inMemoryAuthentication()
            .withUser("user").password("password").roles("USER").and()
            .withUser("admin").password("password").roles("ADMIN");
    }
}

Vue Router配置：

import Vue from 'vue'
import Router from 'vue-router'
import Home from './views/Home.vue'
 
Vue.use(Router)
 
const router = new Router({
  mode: 'history',
  base: process.env.BASE_URL,
  routes: [
    {
      path: '/',
      name: 'home',
      component: Home
    },
    {
      path: '/about',
      name: 'about',
      // 对于about页面，不进行权限控制
      component: () => import('./views/About.vue')
    },
    {
      path: '/user',
      name: 'user',
      meta: { requiresAuth: true },
      component: () => import('./views/UserPage.vue')
    },
    {
      path: '/admin',
      name: 'admin',
      meta: { requiresAuth: true, requiresAdmin: true },
      component: () => import('./views/AdminPage.vue')
    },
    // ... 其他路由
  ]
})
 
// 全局前置守卫，用于权限控制
router.beforeEach((to, from, next) => {
  let user = // 获取当前用户信息的逻辑
  if (to.matched.some(record => record.meta.requiresAuth)) {
    // 这里应该是检查用户是否登录的逻辑
    if (!user) {
      next({ path: '/login', query: { redirect: to.fullPath } }) // 重定向到登录页面
    } else {
      if (to.matched.some(record => record.meta.requiresAdmin)) {
        // 检查是否具有管理员角色
        if (user.role !== 'ADMIN') {
          next({ path: '/', query: { noaccess: true } })
        } else {
          next()
        }
      } else {