nodejs+vue实现登录界面功能（二）

继承上面，这是后我们应该登录成功并进入主界面了，此时我们应该可以显示登录用户的个人信息的。这个时候要用到vuex了。

用户信息自动登录

vuex的导图如下：

此处省略代码的详解（我懒得写了），详情请看源码处的store文件。

注意在跳转到首页的时候可以实现用户信息的展示，绑定userInfo。

<template>
  <div id="home">
    <i class="el-icon-user-solid"></i>
    <div>{{userInfo.name ? userInfo.name : userInfo.phone}}</div>
  <el-button type="danger" @click="logout">退出登录</el-button>
    </div>
    </template>

    <script>
  import {mapState} from 'vuex'
  export default {
    name: "home",
    computed: {
      ...mapState(['userInfo'])
    },
.....
<script>

但是此时会发现一个问题，就是刷新的时候vuex存储的信息会消失，此时我们需要在nodejs使用express-session限定登录时长。

app.js中

app.use(session({
  secret: '12345',
  cookie: {maxAge: 1000*60*60*24 },  //设置maxAge是80000ms，即80s后session和相应的cookie失效过期
  resave: false,
  saveUninitialized: true,
}));

index.js中

/*
根据sesion中的userid, 查询对应的user
 */
router.get('/userinfo', function (req, res) {
  // 取出userid
  const userid = req.session.userid
  // 查询
  UserModel.findOne({_id: userid}, _filter, function (err, user) {
    // 如果没有, 返回错误提示
    if (!user) {
      // 清除浏览器保存的userid的cookie
      delete req.session.userid

      res.send({code: 1, msg: '请先登陆'})
    } else {
      // 如果有, 返回user
      res.send({code: 0, data: user})
    }
  })
})

然后我们回到前台，在home.vue中写上mounted，就是页面刷新的时候getUserInfo请求。

mounted(){
      this.getUserInfo()

    },
    methods:{
      ...mapActions(['getUserInfo']),
      logout(){
        sessionStorage.removeItem("Flag")
        this.$router.push('/login')
        this.$store.dispatch("userLogin", false);
        this.$store.dispatch('logout')
      },
    },

当超过时长的时候，退出当前页面回到登录页面。

在action.js中

// 异步获取用户信息
  async getUserInfo({commit}) {
    const result = await reqUserInfo()
    if (result.code === 0) {
      const userInfo = result.data
      commit(RECEIVE_USER_INFO, {userInfo})
    }else {
      console.log(result.msg)
      sessionStorage.removeItem("Flag")
      router.push('/login')
    }
  },

设置先登录后才能进入首页

设置路由守卫，用到router.beforeEach。

这里设置参考点击

最后附上源码地址：https://github.com/xinhua6/login.git