vue2.0項目實戰 --登錄權限使用全局公用方法取值

項目開發實戰時，遇到要通過鑒權接口獲取用戶信息和權限信息，這時，一般會用公共的方法或者公共的變量來存儲獲取這些信息，

常規的在用jquery作為框架開發，比較簡單，一般是在登錄頁面的js文件中用ajax請求后台接口，返回的數據保存在Cookie或者localStorage中，如下：

login.js

$.ajax({
    url:timestamp(setIp+"/zqzwfwsys/Login/LoginIn"),
    type:"POST",            
    dataType:'json',
    contentType: 'application/json; charset=utf-8',
    data:JSON.stringify({
        "userName":$(".nameBox input").val(),
        "password":$(".pasBox input").val()
    }),
    success: function(data){
      console.log(data);
      if(data.code == '0'){
        setCookie("loginName",data.result.loginNam);
        setCookie("userName",data.result.userName);
      }
    }
})

common.js

var loginName = getCookie("loginName");
var userName = getCookie("userName");

這樣loginName和userName就是全局變量可以在所有引入common.js的頁面直接使用了。

接下來是Vue開發的項目實戰，稍微復雜一點，直接上代碼解析:

main.js--首先是要配置這個文件，這里引用了公共樣式，路由等，我們只看最后一個‘登錄user’，接下來就是要用到它

import Vue from 'vue';
import App from './App';
import router from './router';
import 'babel-polyfill';
import '@/assets/scss/color.scss';
import '@/assets/scss/common.scss';

//表單驗證
import VeeValidate from './validator'
Vue.use(VeeValidate);

//api地址
import api from './assets/js/api';
Vue.prototype.$api = api;

//axios
import axios from './axios';
Vue.prototype.$axios = axios;

//登錄user
import user from './assets/js/userinfo';
Vue.prototype.$user = user;

 

index.vue--login頁面文件下的vue文件

this.$axios.get(Ip + '/userAuth/systemUserAuthentication',{
    params: {
        "sysUserCode": this.name,
        "systemInfoId": this.psd
    }
}).then((res) => {
    if (res.data.success || true) {
        let userObj = res.data.systemUser,
            userString = JSON.stringify(userObj);
        localStorage.setItem(userinfo.userStorage, userString);

　　　　　　//保存用戶信息
　　　　　　localStorage.setItem(userinfo.userNameKey, this.name);
　　　　　　localStorage.setItem(userinfo.userRememberKey, this.isRemember ? 1 : 0);

　　　　　　if(this.isRemember) {   // 判斷是否需要記住密碼
　　　　　　　　localStorage.setItem(userinfo.userIdKey, userObj.staffId);
　　　　　　　　localStorage.setItem(userinfo.userPwKey, this.psd);
　　　　　　} else {
　　　　　　　　sessionStorage.setItem(userinfo.userIdKey, userObj.staffId);
　　　　　　　　localStorage.removeItem(userinfo.userIdKey);
　　　　　　　　localStorage.removeItem(userinfo.userPwKey);
　　　　　　}

    } else {
        this.$message.warning({"message": "當前用戶沒有權限！"});
    }  
}).catch(err => {
    this.$message.warning({"message": "服務器異常！"})
})

 

userinfo.js -- 用來處理用戶登錄信息的文件，我就直接貼代碼，不做刪減了

export default {
    userNameKey:'USER_NAME',
    userPwKey:'USER_PW',
    userIdKey:'USER_ID',
    userTimeKey:'USER_LOGIN_TIME',
    userRememberKey:'USER_REMEMBER',
    userStorage: 'USER_STORAGE',
    getInfo : function (){
        let userName = localStorage.getItem(this.userNameKey);
        let userPw = localStorage.getItem(this.userPwKey);
        let userRemember = localStorage.getItem(this.userRememberKey);
        let userStorage = JSON.parse(localStorage.getItem(this.userStorage));

        let userId = '';
        if(userRemember == '1'){   // 判斷是否要記住密碼
            userId = localStorage.getItem(this.userIdKey);
        }else{
            userId = sessionStorage.getItem(this.userIdKey);    
        }
        let userLoginTime = localStorage.getItem(this.userTimeKey);

        return {
            name:userName,
            id:userId,
            loginTime:userLoginTime,
            userStorage: userStorage,
            depart:'市場部',
            departId:'10',
        }
    },
    isValidLogin: function(){
        let userInfo = this.getInfo();
        if(userInfo.id) return true;
    },
    redirect:function(){
        window.location.reload();
    },
    validLogin:function(){
        if(this.isValidLogin()){

        }else{
            this.redirect();
        }
    },
    exitLogin:function(){   // 退出刪除localStorage
        let userRemember = localStorage.getItem(this.userRememberKey);
        if(userRemember == '1'){
            localStorage.removeItem(this.userIdKey);
        }else{
            sessionStorage.removeItem(this.userIdKey);
        }

        localStorage.removeItem(this.userRememberKey);
        localStorage.removeItem(this.userIdKey);
        localStorage.removeItem(this.userPwKey);
        localStorage.removeItem(this.userStorage);
        localStorage.removeItem(this.userNameKey);

        this.redirect();
    }
}

接下來其他文件要引用鑒權接口返回的信息

this.$user.getInfo().id
this.$user.getInfo().userStorage

這種寫法適用項目大量適用了鑒權接口返回的用戶信息，當然，寫法僅供參考