Vue技术开发中如何处理用户身份认证和授权

// 登录请求
import axios from 'axios';

axios.post('/api/login', {
  username: 'admin',
  password: '123456'
})
.then(function (response) {
  // 登录成功，保存token到localStorage
  localStorage.setItem('token', response.data.token);
})
.catch(function (error) {
  // 登录失败，提示错误信息
  console.log(error);
});

// 路由守卫
import router from './router';

router.beforeEach(async (to, from, next) => {
  // 获取用户token
  const token = localStorage.getItem('token');

  if (token) {
    // 已登录，判断用户权限
    const hasPermission = await checkPermission(token);
    
    if (hasPermission) {
      // 有权限，继续访问
      next();
    } else {
      // 没有权限，跳转到无权限页面
      next('/no-permission');
    }
  } else {
    // 未登录，跳转到登录页面
    next('/login');
  }
});

// 权限检查函数
function checkPermission(token) {
  return new Promise((resolve, reject) => {
    axios.get('/api/checkPermission', {
      headers: {
        Authorization: `Bearer ${token}`
      }
    })
    .then(function (response) {
      resolve(response.data.hasPermission);
    })
    .catch(function (error) {
      reject(error);
    });
  });
}