详解某视频剪辑软件后台系统登录态管理

技术应用js-cookie vuex localStorage做数据持久化

js-cookie

npm i js-cookie -保存

状态管理

user.js

从" @/服务器/登录"导入{登录，注销}从" @/utils/auth"//导入{ getToken，setToken，removeToken }这是上面的js-cookie暴露出来的方法const user={ state : { user info : ' '，token: getToken()，roles 3360[]}，稍作修改： { SET_TOKEN:(状态，令牌)={ state.token=token } }，actions 3360 {//用户名登录登录({ commit }，UserInfo){ const userName=UserInfo。用户名。trim())返回新的承诺(解析，拒绝)={登录({用户名：用户名，密码：用户信息。密码}).然后(RES={ if(RES . status。状态代码===0){ const data=RES . result commit(' SET _ TOKEN '，数据。TOKEN)setToken(数据。TOKEN)本地存储。setitem(' userInfo '，JSON。stringify(data))resolve()} else { resolve(RES . status。状态原因)}).catch(error={ reject(error) }) }，//登出注销({ commit }，UserID){ 0返回新的承诺((解决，拒绝)={注销({ id : userId }).然后((RES)={ if(RES)状态。状态代码===0){ commit(' SET _ TOKEN '，' ')删除TOKEN()本地存储。clear()resolve()} else { resolve(RES . status)。状态原因)} }).catch(错误={ reject(错误)})} } }导出默认用户getter.js

const getter s={用户信息： state=state。用户。用户信息}导出默认gettersstore.js

从“vue”导入某视频剪辑软件从“vuex”导入状态管理从"用户"导入/模块/用户从“”导入吸气剂./getter s ' Vue。use(Vuex)const store=new Vuex .存储({ modules: { user }，getters })导出默认存储以上就是整个登录态的设定

在项目中的使用，如下点击登录后

这个$store.dispatch('login '，{userName: userName，password: password}).然后((res)={console.log(res)if(！res) {//登录成功后的逻辑} else {//登录失败后的逻辑}})点击退出后

这个$store.dispatch('注销，userId).然后((res)={ if(！res) { //退出成功的逻辑} else { //退出失败的逻辑} })需要特别注意的一点，vuex在页面刷新之后会消失掉。

以上所述是小编给大家介绍的某视频剪辑软件后台系统登录管理详解整合，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对我们网站的支持！