登录功能

登录

1. 不跨域：cookie和session记录状态
2. 跨域：使用token使用跨域状态。

token

1. 客户端发送用户名和密码进行登录
2. 服务器验证通过之后，生成该用户token并返回
3. 客户端存储该token。后续都携带该token发送请求
4. 服务器验证token是否通过。
5. 存在证明已存在，客户端请求时可以发送数据。

数据验证

1. 用ui来验证。

<el-form-item prop="username">
//==================
      // 这是表单的验证规则对象
      loginFormRules: {
        // 验证用户名是否合法
        username: [
          { required: true, message: '请输入登录名称', trigger: 'blur' },
          { min: 3, max: 10, message: '长度在 3 到 10 个字符', trigger: 'blur' }
        ],
        // 验证密码是否合法
        password: [
          { required: true, message: '请输入登录密码', trigger: 'blur' },
          { min: 6, max: 15, message: '长度在 6 到 15 个字符', trigger: 'blur' }
        ]

表单重置：this.$refs(this指向log.vue)，通过ui的方法

      <el-form ref="loginFormRef">
 //
     resetLoginForm () {
      //   console.log(this);
      this.$refs.loginFormRef.resetFields()
    },

预验证，不通过就不会向服务器发送请求，ui的方法

validate

配置axios发起登录请求（main.js）

1. import导包
2. main.js配置Vue.prototype.$http = axios
3. 配置请求的根路径：axios.defaults.baseURL = 'http://127.0.0.1:8888/api/private/v1/'
4. 请求后端mysql和node.js
5. const { data: res } = await this.$http.post('login', this.loginForm)。因为方法返回值是promise，所以用await简化操作，并且用async修饰的函数。这样返回的就是一个具体响应对象。并且结构赋值res。
6. 返回200状态码，就登陆成功了。

登录之后操作

1. 将登录成功之后，将服务器的token保存到客户端sessionStorage，因为登陆之外的其他api接口，必须登录之后才能解决。解决跨域问题。
2. sessionStorage是会话期间存储的，token只在当前页面打开时候生效，localStorage是持久化的window.sessionStorage.setItem('token', res.data.token)

路由导航守卫：防止用户没登陆，直接跳到home页。

• 看有没有token字符串，有的话就放行。没有强制跳回到首页。

// 挂载路由导航守卫
router.beforeEach((to, from, next) => {
  // to 将要访问的路径
  // from 代表从哪个路径跳转而来
  // next 是一个函数，表示放行
  //     next()  放行    next('/login')  强制跳转

  if (to.path === '/login' || to.path === '/') return next()
  // 如果用户访问非登录路径，则判断有无登录凭证token
  const loginToken = sessionStorage.getItem('token')
  // 没有token，直接跳转登录页面
  if (!loginToken) return next('/login')
  // 有token，放行
  next()
})

退出原理

• home.vue清除token就行了。

  methods: {
    logout() {
      window.sessionStorage.clear()
      this.$router.push('/login')
    },

git操作

1. git status 查看状态
2. git add. 添加
3. git commit 添加到本地仓库中
4. git branch 处于login分支
5. git checkout master切换到master分支(约等于cd)
6. git merge login 基于master分支把login分支合并进来
7. git push 推送到github