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);    });  });}