定位登录页位置

  • 首先找到原登录页所在位置,即Areas/Admin/Views/User/找到Login.cshtml文件,替换里面的内容即可。

替换

  • 这里准备了一个和原来差不多的登录页面,引入vue和element-ui,实现如下。
@using NewLife.Common;
@{
    Layout = null;
    ViewBag.Title = "登录";
}
<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="utf-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <!-- 上述3个meta标签*必须*放在最前面,任何其他内容都*必须*跟随其后! -->

    <title>@ViewBag.Title - @SysConfig.Current.DisplayName</title>
    <link href="https://cdn.bootcdn.net/ajax/libs/element-ui/2.13.2/theme-chalk/index.css" rel="stylesheet">
    <!-- Login -->
    <style scoped>
        .login-logo {
            text-align: center;
            font-size: 130px;
            color: #4ca6ff;
            margin-top: 50px;
        }

        .cube-login {
            background: #fff;
            padding-bottom: 0;
            border-radius: 15px;
            text-align: center;
        }

            .cube-login .heading {
                display: block;
                font-size: 24px;
                font-weight: 700;
                padding: 5px 0;
                margin-bottom: 20px;
                text-align: center;
            }

            .cube-login input {
                border-radius: 20px;
                box-shadow: none;
                padding: 0 20px 0 45px;
                height: 40px;
                transition: all 0.3s ease 0s;
            }

            .cube-login .text {
                float: left;
                margin-left: 7px;
                line-height: 20px;
                padding-top: 5px;
                text-transform: capitalize;
            }

            .cube-login a {
                position: absolute;
                top: 12px;
                right: 0px;
                font-size: 17px;
                color: #c8c8c8;
                transition: all 0.5s ease 0s;
                color: #4ca6ff;
            }

        .btn {
            float: right;
            font-size: 14px;
            color: #fff;
            background: #00b4ef;
            /* border-radius: 30px; */
            border-radius: 4px;
            padding: 8px 50px;
            border: none;
            text-transform: capitalize;
            transition: all 0.5s ease 0s;
            margin: -25px 0 15px 0;
            width: 100%;
        }

        .text-primary {
            color: #337ab7;
        }

        label {
            display: inline-block;
            max-width: 100%;
            margin-bottom: 5px;
            font-weight: 700;
        }
    </style>
    <!-- Login3 -->
    <style scoped>
        .text-center {
            text-align: center;
        }

        p.login3 {
            font-size: 22px;
            position: relative;
            width: 100%;
            color: #333;
        }

            p.login3 span {
                height: 1px;
                position: absolute;
                background-color: #928f8f;
                width: 35%;
                top: 50%;
            }

                p.login3 span.right {
                    right: 65%;
                }

                p.login3 span.left {
                    left: 65%;
                }
    </style>
</head>
<body>
    <div id="app">
        <el-row type="flex"
                justify="center">
            <el-col :span="6">
                <!-- Login -->
                <div>
                    <!-- Logo-->
                    <el-row>
                        <el-col :span="24"
                                class="login-logo">
                            <i class="el-icon-cloudy"></i>
                        </el-col>
                    </el-row>
                    <template v-if="setting.AllowLogin">
                        <el-form :model="loginForm"
                                 class="cube-login">
                            <!-- 登录-->
                            <span class="heading text-primary">{{ sysConfig.DisplayName }} 登录</span>
                            <el-form-item label="">
                                <el-input v-model="loginForm.username"
                                          placeholder="用户名 / 邮箱"
                                          prefix-icon="el-icon-user"
                                          class="form-control">
                                </el-input>
                            </el-form-item>

                            <el-form-item label="">
                                <el-input v-model="loginForm.password"
                                          placeholder="密码"
                                          prefix-icon="el-icon-lock"
                                          class="form-control"
                                          show-password>
                                </el-input>
                            </el-form-item>
                            <el-form-item label="">
                                <el-checkbox class="text text-primary"
                                             v-model="loginForm.remember">记住我</el-checkbox>

                                <template v-if="setting.AllowRegister">
                                    <div style="display: inline-block; margin-top: 5px; float: right;">
                                        <a href="#Register"
                                           data-toggle="tab"
                                           style="margin-left: auto; margin-right: auto; position: static; font-size: 15px; margin-top: 5px;">
                                            <span>我要注册</span>
                                        </a>
                                    </div>
                                </template>
                            </el-form-item>
                        </el-form>

                        <button class="btn"
                                @@click="login">
                            登录
                        </button>
                    </template>
                </div>
                <!-- Login3 -->
                <div v-if="setting.AutoRegister && ms.length > 0">
                    <el-row>
                        <el-col :span="24" class="text-center">
                            <p class="login3">
                                <span class="left"></span>
                                第三方登录
                                <span class="right"></span>
                            </p>
                            <el-row>
                                <el-col :sm="24">
                                    <template v-for="(mi, i) in ms">
                                        <a :key="i" :href="getUrl(mi)">
                                            {{ mi.Name }}
                                        </a>
                                    </template>
                                </el-col>
                            </el-row>
                        </el-col>
                    </el-row>
                </div>
            </el-col>
        </el-row>
    </div>
    <script src="https://cdn.bootcdn.net/ajax/libs/vue/2.6.11/vue.min.js"></script>
    <script src="https://cdn.bootcdn.net/ajax/libs/element-ui/2.13.2/index.js"></script>
    <script src="https://cdn.bootcdn.net/ajax/libs/axios/0.19.2/axios.min.js"></script>
    <script>
        new Vue({
            el: '#app',
            data() {
                return {
                    loginForm: {
                        username: null,
                        password: null,
                        remember: true
                    },
                    sysConfig: {
                        DisplayName: "魔方平台"
                    },
                    setting: {
                        AllowLogin: true,
                        AllowRegister: true,
                        AutoRegister: true
                    },
                    ms: [
                        {
                            Name: "NewLife"
                        }
                    ],
                    dic: {
                        NewLife: "新生命",
                        Baidu: "百度",
                        Weixin: "微信",
                        Taobao: "淘宝",
                        Ding: "钉钉"
                    },
                    returnUrl: null
                };
            },
            computed: {
                request() {
                    const service = axios.create({
                        timeout: 50000
                    });

                    // 响应拦截
                    service.interceptors.response.use(
                        response => {
                            const data = response.data;
                            if (data.code === 500) {
                                alert(data.message);
                                return Promise.reject(data.message);
                            }
                            return data;
                        },
                        error => {
                            console.log('err' + error)
                            return Promise.reject(error);
                        }
                    );

                    return service;
                }
            },
            methods: {
                login() {
                    let vm = this;
                    vm.loginByUsernameAsync(vm.loginForm)
                        .then(() => {
                            let href = "/Admin";
                            let r = vm.getQueryString("r");
                            if (r != null) {
                                href = r;
                            }
                            location.href = href;
                        })
                        .catch(() => { });
                },
                getUrl(mi) {
                    let vm = this;
                    var url = "/Sso/Login?name=" + mi.Name;
                    if (vm.returnUrl != null) {
                        url += "&r=" + vm.returnUrl;
                    }
                    return url;
                },
                getName(mi) {
                    let vm = this;
                    let nickName = vm.dic[mi.Name];
                    if (nickName == null) {
                        nickName = mi.Name;
                    }
                    return nickName;
                },

                loginByUsernameAsync(userInfo) {
                    let vm = this;
                    const data = {
                        username: userInfo.username,
                        password: userInfo.password,
                        remember: userInfo.remember
                    };

                    return vm.request({
                        url: "/Admin/User/Login",
                        method: "post",
                        params: data
                    });
                },
                getQueryString(name)
                {
                    var reg = new RegExp("(^|&)"+ name +"=([^&]*)(&|$)");
                    var r = window.location.search.substr(1).match(reg);
                    if(r!=null)return  unescape(r[2]); return null;
                }
            }
        })
    </script>
</body>
</html>
  • 效果如下。

image.png

要点

  • 登录接口为/Admin/User/Login,参数为url参数,“username=admin&password=admin&remember=true
  • 登陆成功后跳转地址,可直接跳转到根目录“/”,默认是“/Admin”,最好是获取url参数中的“r”参数进行跳转。参考上面的代码。
  • 第三方登录地址设置为“/Sso/Login?name=NewLife”,name可选值如下。
{
  NewLife: "新生命",
  Baidu: "百度",
  Weixin: "微信",
  Taobao: "淘宝",
  Ding: "钉钉"
}

作者:笑笑 发布:2020-06-19 15:46:49 浏览:1,893)