dubbo-admin-ui/src/Login.vue

<!--
  ~ Licensed to the Apache Software Foundation (ASF) under one or more
  ~ contributor license agreements.  See the NOTICE file distributed with
  ~ this work for additional information regarding copyright ownership.
  ~ The ASF licenses this file to You under the Apache License, Version 2.0
  ~ (the "License"); you may not use this file except in compliance with
  ~ the License.  You may obtain a copy of the License at
  ~
  ~     http://www.apache.org/licenses/LICENSE-2.0
  ~
  ~ Unless required by applicable law or agreed to in writing, software
  ~ distributed under the License is distributed on an "AS IS" BASIS,
  ~ WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
  ~ See the License for the specific language governing permissions and
  ~ limitations under the License.
-->
<template>
  <v-app id="inspire">
    <v-content>
      <v-container fluid fill-height>
        <v-layout align-center justify-center>
          <v-flex xs12 sm8 md4>
            <v-card class="elevation-12">
              <v-toolbar dark color="primary">
                <v-spacer></v-spacer>
              </v-toolbar>
              <v-card-text>
                <v-form action='login' >
                  <v-text-field required
                                name="username"
                                v-model="userName"
                                append-icon="person"
                                :label="$t('userName')" type="text">
                  </v-text-field>
                  <v-text-field
                    name="input-10-2"
                    :label="$t('password')"
                    :append-icon="e2 ? 'visibility' : 'visibility_off'"
                    :append-icon-cb="() => (e2 = !e2)"
                    v-model="password"
                    class="input-group--focused"
                    :type="e2 ? 'password' : 'text'"
                    @keyup.enter.native="login"
                  ></v-text-field>

                  <v-card-actions>
                    <v-spacer></v-spacer>
                    <v-btn @click="login" color="primary">{{$t('login')}}<v-icon>send</v-icon></v-btn>
                    <v-spacer></v-spacer>
                  </v-card-actions>
                </v-form>
              </v-card-text>
            </v-card>
          </v-flex>
        </v-layout>
      </v-container>
    </v-content>
    <footers></footers>
  </v-app>
</template>

<script>
import Footers from '@/components/public/Footers'

export default {
  name: 'Login',
  data: () => ({
    userName: '',
    password: '',
    e2: true
  }),
  components: {
    Footers
  },
  methods: {
    login: function () {
      const userName = this.userName
      const password = this.password
      const vm = this
      this.$axios.get('/user/login', {
        params: {
          userName,
          password
        }
      }).then(response => {
        if (response.status === 200 && response.data) {
          localStorage.setItem('token', response.data)
          localStorage.setItem('username', userName)
          // login and redirect
          const redirect = this.$route.query.redirect
          if (redirect) {
            this.$router.replace(redirect)
          } else {
            this.$router.replace('/')
          }
        } else {
          vm.$notify('Username or password error,please try again')
        }
      })
    }
  }
}
</script>

<style scoped>
</style>