dotnetcore集成vue-element-admin 登录

dotnetcore集成vue-element-admin 登录

我这里使用的是vue-element-admin的基础模板vue-admin-template，基本上vue-element-admin也是同理。

从vue-element-admin基础模板，vue-admin-template clone下来

GitHub地址

执行Npm 安装,如果没有npm的话，就去下载个node.js安装下，在vue-admin-template下面，
打开cmd，指定到自己vue-admin-template目录下：

npm install

等着跑完。

分析代码

使用vs code打开vue-admin-template代码，找到src/utils/request.js 文件，在里面可以找到response的返回代码设置为20000，这里我们可以改为200。VUE_APP_BASE_API是我们url地址拼接
VUE_APP_BASE_API设置在.env.developement文件里

const service = axios.create({
  baseURL: process.env.VUE_APP_BASE_API, // url = base url + request url
  // withCredentials: true, // send cookies when cross-domain requests
  timeout: 5000 // request timeout
})

if (res.code !== 20000) {
      Message({
        message: res.message || 'Error',
        type: 'error',
        duration: 5 * 1000
      })

我们再打开src/views/login/index.vue 可以找到登录代码：

handleLogin() {
      this.$refs.loginForm.validate(valid => {
        if (valid) {
          this.loading = true
          this.$store.dispatch('user/login', this.loginForm).then(() => {
            this.$router.push({ path: this.redirect || '/' })
            this.loading = false
          }).catch(() => {
            this.loading = false
          })
        } else {
          console.log('error submit!!')
          return false
        }
      })
    }

这个使用的是src/store/modules/user.js 这里的login

login({ commit }, userInfo) {
    const { username, password } = userInfo
    return new Promise((resolve, reject) => {
      login({ username: username.trim(), password: password }).then(response => {
        const { data } = response
        commit('SET_TOKEN', data.token)
        setToken(data.token)
        resolve()
      }).catch(error => {
        reject(error)
      })
    })
  },

可以看到，这里需要一个data，前面我们知道了还有一个code。
那么我们接口返回就是一个code，一个data，data里面有一个token。
接着分析可以看到这个文件后面还会请求userinfo接口，logout接口：
这里可以看到都是从api/user过来的，找到api文件下，user.js文件，

export function login(data) {
  return request({
    url: '/vue-admin-template/user/login',
    method: 'post',
    data
  })
}

就可以看到实际的地址：url: ‘/vue-admin-template/user/login’
其实这里使用的是mock里的数据。
我们找到mock文件下的user.js文件，可以看到几个常量，就是登录数据。

那么，vs新建一个.net core webapi项目，我这里用的是.net 5.0，直接就带了swagger，直接生成空的webapi项目即可，不需要任何设置。

Axios 跨域相关

这里比较重要

需要配置跨域，由于axios每次请求会先发一次httpoptions请求，确认接口响应后再发实际请求。

新建CorsMiddleware类，跨域代码

public class CorsMiddleware
    {
        private readonly RequestDelegate _next;
        public CorsMiddleware(RequestDelegate next)
        {
            _next = next;
        }

        public async Task Invoke(HttpContext context)
        {
            if (!context.Response.Headers.ContainsKey("Access-Control-Allow-Origin"))
            {
                context.Response.Headers.Add("Access-Control-Allow-Origin", "*");
            }
            if (!context.Response.Headers.ContainsKey("Access-Control-Allow-Headers"))
            {
                context.Response.Headers.Add("Access-Control-Allow-Headers", "content-type,x-token");
            }
            await _next(context);
        }
    }

startup里configure方法里,注入中间件：

 app.UseMiddleware<CorsMiddleware>();

ConfigureServicesServices里：

services.AddCors(options =>
            {
                options.AddPolicy("any", builder =>
                {
                    //builder.AllowAnyOrigin() //允许任何来源的主机访问
                    builder

                    .WithOrigins("http://*.*.*.*")//.SetIsOriginAllowedToAllowWildcardSubdomains()//设置允许访问的域

                    .AllowAnyMethod()

                    .AllowAnyHeader()

                    .AllowCredentials();//

                });

            });

完成后还要配置httpoptions：
新建OptionsRequestMiddleware类，代码：

public class OptionsRequestMiddleware
    {
        private readonly RequestDelegate _next;

        public OptionsRequestMiddleware(RequestDelegate next)
        {
            _next = next;
        }

        public async Task Invoke(HttpContext context)
        {
            if (context.Request.Method.ToUpper() == "OPTIONS")
            {
                context.Response.StatusCode = 200;
                return;
            }

            await _next.Invoke(context);
        }
    }

startup注入中间件：

app.UseMiddleware<OptionsRequestMiddleware>();

这里，可以新建一个login controller，这里都是按照mock中的常量来模拟的返回数据：

[HttpPost]
        public JsonResult UserLogin()
        {
            string token = "admin-token";

            return new JsonResult(new { code = 200, data = new { token = token } });
        }


        [HttpGet]
        public JsonResult UserInfo()
        {
            string roles = @"[""admin""]";
            string introduction = "I am a super administrator";
            string avatar = "https://wpimg.wallstcn.com/f778738c-e4f8-4870-b634-56703b4acafe.gif";
            string name = "Super Admin";

            return new JsonResult(new { code = 200, data = new { roles = roles, introduction = introduction, avatar = avatar, name = name } });
        }

        [HttpPost]
        public JsonResult UserLogout()
        {
            return new JsonResult(new { code = 200, data = "success" });
        }

完成后，就可以将后端运行起来，那么前端还要改下url。这里我们需要将VUE_APP_BASE_API改为我们运行后端的地址。api/user.js文件中几个url地址改为

url: '/Login/UserLogin',

url: '/Login/UserInfo',

url: '/Login/UserLogout',

运行，正常登录，即可。