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