【原创】Vue 项目实战之登录和注销

清除无用代码和组件内容

安装 Vue-Router

npm install --legacy-peer-deps vue-router@3.5.2

文件代码

main.js

import Vue from 'vue';
import App from './App';
import router from './router';
import ElementUI from 'element-ui';

Vue.config.productionTip = false;

Vue.use(ElementUI);

new Vue({
  router,
  render: h => h(App),
}).$mount('#app');

router.js

import Vue from 'vue';
import Router from 'vue-router';
import Login from './components/login';

Vue.use(Router);

export default new Router({
  routes: [

    {
      path: '/',
      redirect: '/login'
    },
    {
      path: '/login',
      component: Login
    }
  ]

});

App.vue

<template>
  <div id="app">
    <router-view></router-view>
  </div>
</template>

<script>

export default {
  name: 'App'
}
</script>

<style>
</style>

login.js

<template>
  <div>登录组件</div>
</template>

<script>
export default {

}
</script>

<style>
</style>

图标库

如果 Element UI 组件库里面没有需要的图标，可以采用第三方图标库，例如阿里图标库。

使用步骤

• 引入项目下面生成的fontclass代码：
  <link rel="stylesheet" type="text/css" href="./iconfont.css">
• 挑选相应图标并获取类名，应用于页面：
  <i class="iconfont icon-xxx"></i>

例如用户图标：
<i class="iconfont icon-user"></i>

表单验证

• 为 elform 对象绑定一个 :rules="rules"
• 在 data 数据中定义相应对象

  rules: {
    username: [
      { required: true, message: '请输入用户名', trigger: 'blur' },
      { min: 3, max: 5, message: '长度在 3 到 5 个字符', trigger: 'blur' }
    ],
    password: [
      { required: true, message: '请输入密码', trigger: 'change' },
      { min: 3, max: 5, message: '长度在 3 到 5 个字符', trigger: 'blur' }
    ]
  }

• 为表单不同项指定不同的验证规则
  <el-form-item prop="username">

表单重置

• 为表单添加 ref 引用
  <el-form ref="loginForm">

• this.$refs[formName].resetFields();

表单预验证

• <el-form ref="loginForm">
• this.$refs[formName].resetFields();

• this.$refs[formName].validate((valid) => {
      console.log(valid);
  });

  发送请求

• 配置 axios

import axios from 'axios';
// 配置请求的根路径
axios.defaults.baseURL = 'http://127.0.0.1:8888/api/private/v1/';
Vue.prototype.$http = axios;

    login (formName) {
      this.$refs[formName].validate(async valid => {
        if (!valid) return;
        let { data: res } = await this.$http.post('login', this.loginForm);
        if (res.meta.status !== 200) return console.log('登录失败');
        console.log('登录成功');
      });
    },

消息提示

• 引入 Message，并挂载到 Vue。
  element.js

  import { Message } from 'element-ui';
  Vue.prototype.$message = Message;

login.vue

if (res.meta.status !== 200) 
return this.$message.error('登录失败');
       this.$message.success('登录成功');

登录之后记录用户信息

        if (res.meta.status !== 200) return this.$message.error('登录失败');
        sessionStorage.setItem('token', res.data.token);
        this.$router.push('/home');

router.js

export default new Router({
  routes: [
    {
      path: '/',
      redirect: '/login'
    },
    {
      path: '/login',
      component: Login
    },
    {
      path: '/home',
      component: Home
    }
  ]
});

导航守卫控制用户权限

router.js

const router = new Router({
  routes: [

    {
      path: '/',
      redirect: '/login'
    },
    {
      path: '/login',
      component: Login
    },
    {
      path: '/home',
      component: Home
    }
  ]
});

// 全局前置守卫
router.beforeEach((to, from, next) => {
  if (to.path === '/login') return next();
  const token = sessionStorage.getItem('token');
  if (!token) return next('/login');
  next();
});

export default router;

退出

home.vue

<template>
  <div>
    <el-button type="info" @click="logout">退出</el-button>
  </div>
</template>

<script>
export default {
  methods: {
    logout () {
      sessionStorage.removeItem('token');
      this.$router.push('/login');
    }
  }
}
</script>