vue 验证登录及跳转检验

本文链接： https://blog.csdn.net/gongpan2468/article/details/85776513

Vue管理系统的登录。

首先，一个登录的组件Login.vue，请求校验用户名密码是否正确，若正确，将用户名与密码保存至store中的state中。

然后，在访问每个页面判断state中是否有登录信息，若没有，跳转到登录页，采用的是router.beforeEach()

主要代码：

从页面上获取到用户名，密码后，点击登录按钮，执行以下函数

        loginCheck () {
            // accout为页面获取的登录信息
            var name=this.account.username;
            //保存的密码
            var pass=this.account.password;
            // 判断是否为空
            if(name==''||name==null){
              this.$alert('请输入正确的用户名')
              return
            }else if(pass==''||pass==null) {
              this.$alert('请输入正确的密码')
              return
            }
            let para = {
                login_name: name
            }

            // 调接口，检验登录，在这里用了将所有接口服务写入了api.js里，若没有直接axios.get(路由，参数)
            this.$api.get_user_login_info(para)  
            .then(res => {
                console.log(res.data.data)
                if (res.data.data.length > 0) {
                    if (pass == res.data.data[0].login_password) {
                        let user = {
                            Loginedname: res.data.data[0].login_name,
                            UserId:res.data.data[0].user_id
                        }
                        // 用commit调用store的方法LOGIN，并传入参数user
                        this.$store.commit('LOGIN',user)

                        // 跳转
                        this.$router.push("/DataShow")
                    } else {
                        this.$alert('登陆失败！请检查用户名与密码')
                    }
                } else {
                    this.$alert('没有该用户')
                }
            })
            .catch(err => {
                console.log(err);
            });
        }

store.js

state 可以理解为变量，你需要全局使用的。

mutations 相当于函数，处理state变量的在其他地方引用mutations内的函数，必须this.$store.commit('LOGIN')，最多带一个参数。

getters 也相当于函数，访问state的。


import Vue from 'vue';
import Vuex from 'vuex';
Vue.use(Vuex)
 
const state = {
 // 登录状态为没登录
 logined: false,
 // 用户信息数据
 Loginedname: null,
 UserId: null,
}
 
var mutations={
 LOGIN (state,user) {
  // 登录
  // 先让登录状态变为登录了
  // 若只是改变state里的值，在强制刷新后会丢失，数据添加到sessionStorage里
  sessionStorage.setItem("Loginedname", user.Loginedname)  
  sessionStorage.setItem("UserId", user.UserId)  
  sessionStorage.setItem("logined", true) 
  state.Loginedname = user.Loginedname
  state.UserId = user.UserId
  state.logined = true
 },

 // 登出
 LOGOUT (state) {
  // 这个同理
  sessionStorage.removeItem("Loginedname")
  sessionStorage.removeItem("UserId")  
  sessionStorage.removeItem("logined")
  state.Loginedname = ''
  state.UserId = ''
  state.logined = false
 }
}
var getters={
  isLogin (state) {
      if (!state.logined) {    
          state.logined=sessionStorage.getItem('logined');   //从sessionStorage中读取状态
          state.Loginedname=sessionStorage.getItem('Loginedname');
          state.UserId=sessionStorage.getItem('UserId');
      }
      return state.logined
  }
}
export default new Vuex.Store({
 getters,
 state,
 mutations
})

main.js

一定要在main.js中引用

最后，在访问每一个页面前必须检查登录信息是否存在，同样在main.js里调用router.beforeEach

注意：router.beforeEach必须在Vue.use(Router)之前使用，否则，初次访问不检查

登录完成。

vue 验证登录及跳转检验

猜你喜欢