Django+Vue：搭建个人博客(5)

记住密码

1）当用户点击记住密码时，下次登录即可保存用户信息，我们使用localStorage保存用户的信息：

// 用户登录方法 （vue代码）
    handleSubmit(name) {
      this.$refs[name].validate(valid => {
        if (valid) {
          this.modal_loading = true;
          var username = this.formInline.user;
          var password = this.formInline.password;
          this.$http
            .userLogin(username, password, this.getCookie("csrftoken")) // 自定义的后端接口
            .then(resp => {
              if (resp.data.code === "200") { // 返回的响应码为200则表示登录成功
                if (this.checked == true) { // 判断用户是否点击记住密码
                  let userinfo = {
                    username: username,
                    password: password,
                    checked: true
                  };
                  localStorage.setItem("userinfo", JSON.stringify(userinfo)); 
                   // 将用户信息定义存到localStorage
                } else { // ，没有点击的话就清除localStorage中的userinfo信息
                  localStorage.removeItem("userinfo");
                }
                this.$Message.success(resp.data.msg); // 响应后台返回数据
                var obj = {
                  username: username,
                  password: password
                };
                sessionStorage.setItem("user", JSON.stringify(obj));
                this.$router.push({
                  path: "/index"
                });
                this.modal_loading = false;
              } else {
                this.$Message.error(resp.data.msg);
                this.modal_loading = false;
              }
            });
        } else {
          this.$Message.error("Fail!");
        }
      });
    }

2）实现记住密码的时候，就是在网页创建完成或者加载过程中读取localStorage中信息，将用户信息自动填写：

// 页面创建完成
mounted() {
    let userinfo = localStorage.getItem("userinfo");
    if (userinfo) { // 如果存在就自动填写用户信息
      userinfo = JSON.parse(localStorage.getItem("userinfo"));
      this.formInline.user = userinfo.username; 
      this.formInline.password = userinfo.password;
      this.checked = true;
    }
  },

注册页面

1）注册页面代码JiageRegister.vue:

// template
<template>
  <div class="main-body">
    <div class="form">
      <Icon type="logo-octocat" size="60" />
      <h1>Create your account</h1>
    </div>
    <div class="login">
      <Form ref="formInline" :model="formInline" :rules="ruleInline">
        <FormItem prop="user">
          <div class="prompt">Username</div>
          <i-Input type="text" v-model="formInline.user" placeholder="Username" clearable>
            <Icon type="ios-person" slot="prepend" size="16"></Icon>
          </i-Input>
        </FormItem>
        <FormItem prop="email">
          <div class="prompt">Email address</div>
          <i-Input type="text" v-model="formInline.email" placeholder="Email address" clearable>
            <Icon type="ios-mail" slot="prepend" size="16"></Icon>
          </i-Input>
        </FormItem>
        <FormItem prop="password">
          <div class="prompt">Password</div>
          <i-Input
            type="password"
            v-model="formInline.password"
            placeholder="Password"
            clearable
            @keyup.enter.native="handleSubmit('formInline')"
          >
            <Icon type="ios-lock" slot="prepend" size="16"></Icon>
          </i-Input>
        </FormItem>
        <FormItem>
          <Button
            class="btn"
            type="primary"
            size="large"
            long
            :loading="modal_loading"
            @click="handleSubmit('formInline')"
          >Create new</Button>
        </FormItem>
      </Form>
    </div>
    <p class="register-link">
      Have a JiaGE account?
      <router-link to="/account/login">Sign in.</router-link>
    </p>
  </div>
</template>

2）用户注册实现：

// 用户注册
   handleSubmit(name) {
     this.$refs[name].validate(valid => {
       if (valid) {
         this.modal_loading = true;
         var username = this.formInline.user;  // 获取用户输入信息
         var password = this.formInline.password;
         var email = this.formInline.email;
         this.$http
           .userRegister(
             email,
             username,
             password,
             this.getCookie("csrftoken")  // 后台调用接口
           ) // 传给后台接口然后保存到数据库
           .then(resp => {
             if (resp.result.code === "200") { // 如果成功进行跳转
               this.$router.push({
                 path: "/account/login"
               });
               this.$Message.success(resp.result.msg);
             } else {
               this.$Message.error(resp.result.msg);
             }
             this.modal_loading = false;
           });
       }
     });
   }

权限

1）每个页面都有权限，博客也有。登录用户才能写博客、查看个人资料等功能，未登录用户则只能查看博客，不能对博客进行评论、收藏等操作，博主是用vue的全局导航守卫来简单实现的，首先在路由里面添加一个字段，在进行路由跳转前判断进入这个页面之前是否需要权限：

// 路由设置
{
     path: '/account/login',
     name: "Login",
     components: {
         default: Login
     }
 },
 {
     path: '/account/register',
     name: "Register",
     components: {
         default: Register
     }
 }, // 进入登录页面和注册页面不需要任何权限，就没有设置{ requireAuth: true }
 {
     path: '/account/profile',
     name: 'Profile',
     components: {
         default: Profile,
         header: Header,
         footer: Footer,

     },
     meta: { requireAuth: true }
 } // 进入个人中心就需要用户登录

2）全局导航守卫：

router.beforeEach((to, from, next) => {
  document.title = to.name; // 让页面title显示路由对应的name值
  let user = JSON.parse(sessionStorage.getItem("user"));
  if (to.path === '/account/login') {
    sessionStorage.removeItem("user");
  }
  if (to.meta.requireAuth) { // 判断该路由是否需要登录权限
    if (user) { // 判断本地是否存在user
      next();
    } else {
      if (to.path === '/account/register') { // 如果跳转的路由是注册页面，就进入注册页面
        next();
      } else { // 否则就进入登录页面
        next({
          path: '/account/login'
        })
      }
    }
  }
  else {
    next();
  }
})

这样就完成了。