Vue.js结合ASP.NET Core构建用户登录与权限验证系统

在本教程中，我将利用Visual Studio 2022的强大集成开发环境，结合Vue.js前端框架和ASP.NET Core后端框架，从头开始创建一个具备用户登录与权限验证功能的Web应用程序。我们将充分利用Visual Studio的内置工具和模板来简化开发流程。

1. 环境准备

Visual Studio 2022,Vue3

2. 创建项目

打开Visual Studio 2022，选择“创建新项目”。在项目模板搜索框中输入“Vue and ASP.NET Core”，选择模板后点击“下一步”。
按照图中配置:

生成目录如下:

3. Vue配置

步骤一: 安装包

右键npm->安装新的npm包

• element-plus UI包
• @element-plus/icons-vue UI图标包
• axios 发送请求的包
• qs 发送请求时序列化的包
• vue-router vue路由
• jwt-decode 令牌解码

步骤二: 配置文件

• 封装axios
  新建axios.js文件,内容如下:

  // axios.js
  
  import axios from 'axios';
  import PLATFROM_CONFIG from '../public/config';
  
  
  const instance = axios.create({
       
      baseURL: PLATFROM_CONFIG.baseURL, // 替换为实际的 API 地址
      timeout: 10000,
  });
  
  instance.defaults.headers.post['Content-Type'] = 'application/json';
  
  // 添加请求拦截器
  axios.interceptors.request.use((config) => {
       
      // 在发送请求之前做些什么
      return config;
  }, function (error) {
       
      // 对请求错误做些什么
      return Promise.reject(error);
  });
  
  // 添加响应拦截器
  axios.interceptors.response.use(function (response) {
       
      // 对响应数据做点什么
      if (response.status === 200) {
       
          return Promise.resolve(response);
      } else {
       
          return Promise.reject(response);
      }
  }, function (error) {
       
      // 对响应错误做点什么
      return Promise.reject(error);
  });
  
  
  export const get = (url, params) => {
       
      return instance.get(url, {
        params });
  };
  
  export const post = (url, data) => {
       
      // data = QS.stringify(data);
      return instance.post(url, data);
  };
  
  

• 创建路由
  新建router文件夹,并新建router.js文件

import {
    createRouter, createWebHashHistory } from 'vue-router'

import qs from 'qs';
import {
    ElMessage } from 'element-plus'

import {
    post } from '../axios';

import Home from '../components/Home.vue'
import Setting from '../components/Setting.vue'
import Login from '../components/Login.vue'
import LoginOut from '../components/LoginOut.vue'

// 路由配置
const routes = [
    {
    path: '/', component: Home },
    {
    path: '/Login', component: Login },
    {
    path: '/Setting', component: Setting, meta: {
    requiresAuth: true, role: 'ShortcutManage;' } },
    {
    path: '/LoginOut', component: LoginOut },
]

const router = createRouter({
   
    history: createWebHashHistory(),
    routes,
})
// 路由守卫,在这里创建验证的流程
router.beforeEach((to, from, next) => {
   
    const accessToken = localStorage.getItem(