前后端分离架构下，Vue前端如何进行权限认证处理？

在前后端分离架构下，Vue前端进行权限认证处理通常涉及以下几个步骤：

1. 用户登录与Token获取

用户登录时，前端通过表单收集用户的登录信息（如用户名和密码），然后发送POST请求到后端API进行验证。后端验证成功后，会返回一个Token（通常是JWT），前端需要将这个Token存储在本地（如localStorage或sessionStorage）以便后续请求使用。

// 示例：用户登录
axios.post('/api/login', {
  username: 'user',
  password: 'password'
})
.then(response => {
  const token = response.data.token;
  localStorage.setItem('token', token); // 存储Token
  // 跳转到主页或其他受保护的路由
})
.catch(error => {
  console.error('登录失败', error);
});

2. Token的存储与管理

Token通常存储在localStorage或sessionStorage中。localStorage适合长期存储，而sessionStorage在浏览器关闭后会被清除。

// 存储Token
localStorage.setItem('token', token);

// 获取Token
const token = localStorage.getItem('token');

// 清除Token
localStorage.removeItem('token');

3. 请求拦截器

在每次发送请求时，前端需要在请求头中携带Token。可以通过Axios的请求拦截器自动添加Token。

axios.interceptors.request.use(config => {
  const token = localStorage.getItem('token');
  if (token) {
    config.headers.Authorization = `Bearer ${token}`;
  }
  return config;
}, error => {
  return Promise.reject(error);
});

4. 路由守卫

Vue Router提供了路由守卫功能，可以在路由跳转前进行权限验证。如果用户未登录或没有权限访问某个路由，可以重定向到登录页面或其他页面。

router.beforeEach((to, from, next) => {
  const token = localStorage.getItem('token');
  if (to.meta.requiresAuth && !token) {
    next('/login'); // 重定向到登录页面
  } else {
    next(); // 继续导航
  }
});

5. 动态路由与权限控制

根据用户的角色或权限，动态加载不同的路由。可以在用户登录后，根据返回的权限信息动态生成路由。

// 示例：动态生成路由
const routes = [
  { path: '/', component: Home },
  { path: '/admin', component: Admin, meta: { requiresAuth: true, roles: ['admin'] } },
  { path: '/user', component: User, meta: { requiresAuth: true, roles: ['user'] } }
];

router.addRoutes(routes);

6. Token过期处理

Token通常有有效期，前端需要处理Token过期的情况。可以在请求拦截器中检查Token是否过期，如果过期则跳转到登录页面或刷新Token。

axios.interceptors.response.use(response => {
  return response;
}, error => {
  if (error.response.status === 401) {
    // Token过期或无效，跳转到登录页面
    localStorage.removeItem('token');
    router.push('/login');
  }
  return Promise.reject(error);
});

7. 刷新Token

如果Token即将过期，可以通过刷新Token的机制来延长用户的会话。通常，后端会提供一个刷新Token的接口，前端在Token即将过期时调用该接口获取新的Token。

function refreshToken() {
  return axios.post('/api/refresh-token', {
    refreshToken: localStorage.getItem('refreshToken')
  })
  .then(response => {
    const newToken = response.data.token;
    localStorage.setItem('token', newToken);
    return newToken;
  })
  .catch(error => {
    console.error('刷新Token失败', error);
    throw error;
  });
}

8. 注销与清除Token

用户注销时，前端需要清除本地存储的Token，并跳转到登录页面。

function logout() {
  localStorage.removeItem('token');
  localStorage.removeItem('refreshToken');
  router.push('/login');
}

总结

在前后端分离架构下，Vue前端进行权限认证处理的核心是通过Token进行身份验证，并结合路由守卫、请求拦截器、动态路由等技术手段来实现细粒度的权限控制。通过这些步骤，可以确保只有经过认证的用户才能访问受保护的资源，并且能够根据用户的角色或权限动态调整前端的功能和路由。