Issue
I've just installed @nuxtjs/auth on my project.
I get Property '$auth' does not exist on type 'AuthLoginPage'
class.
Method login on login class page
this.$auth.loginWith('local', {
data: {
username: 'your_username',
password: 'your_password'
}
});
My nuxt.config.ts
modules: [
// Doc: https://axios.nuxtjs.org/usage
'@nuxtjs/axios',
'@nuxtjs/auth',
'@nuxtjs/pwa',
],
...
auth: {
strategies: {
local: {
endpoints: {
login: {
url: 'http://127.0.0.1:3001/users/login',
method: 'post',
propertyName: 'token'
},
logout: {
url: 'http://127.0.0.1:3001/users/logout',
method: 'post'
},
user: {
url: 'http://127.0.0.1:3001/users/me',
method: 'get',
propertyName: 'user'
}
},
// tokenRequired: true,
// tokenType: 'bearer'
}
}
It's impossible for me to use NuxtJS Auth.
Have you got an idea please?
Solution
This problem caused when you add Typescript to vueJs project with NuxtJs.
The solution of this warn of types, posted in official web of define types DefinitelyTyped/DefinitelyTyped
- You need to create a file in your root project types/index.d.ts and add this code
<pre>
// Type definitions for @nuxtjs/auth 4.8
// Project: https://auth.nuxtjs.org
// Definitions by: Ruskin Constant <https://github.com/jonnyparris>
// Daniel Leal <https://github.com/danielgek>
// Nick Bolles <https://github.com/NickBolles>
// Definitions: https://github.com/DefinitelyTyped/DefinitelyTyped
// TypeScript Version: 3.1
import Vue, { ComponentOptions } from 'vue';
export interface Storage {
setUniversal(key: string, value: any, isJson?: boolean): string;
getUniversal(key: string, isJson?: boolean): any;
syncUniversal(key: string, defaultValue: any, isJson?: boolean): any;
// Local State
setState(key: string, val: any): string;
getState(key: string): string;
watchState(key: string, handler: (newValue: any) => void): any;
// Cookies
setCookie(key: string, val: any, options?: object): any;
getCookie(key: string, isJson?: boolean): any;
// Local Storage
setLocalStorage(key: string, val: any, isJson?: boolean): any;
getLocalStorage(key: string, isJson?: boolean): any;
}
export interface Auth<T = any> {
ctx: any;
$state: any;
$storage: Storage;
user: Partial<T>;
loggedIn: boolean;
loginWith(strategyName: string, ...args: any): Promise<never>;
login(...args: any): Promise<never>;
logout(): Promise<never>;
fetchUser(): Promise<never>;
fetchUserOnce(): Promise<never>;
hasScope(scopeName: string): boolean;
setToken(strategyName: string, token?: string): string;
getToken(strategyName: string): string;
syncToken(strategyName: string): string;
onError(handler: (error: Error, name: string, endpoint: any) => void): any;
setUser(user?: Partial<T>): any;
reset(): Promise<never>;
redirect(name: string): any;
}
declare module 'vue/types/options' {
interface ComponentOptions<V extends Vue> {
auth?: boolean | string;
}
}
declare module 'vue/types/vue' {
interface Vue {
$auth: Auth;
}
}
</pre>
after in your packgage.json you need add the typings and files, add this lines
"typings": "types/index.d.ts",
"files": ["types/*.d.ts"],
next, your warning disappear
no warning types
this is the guide for solve warning
DefinitelyTyped/DefinitelyTyped
Answered By - Edwin Rendoon Cadavid
0 comments:
Post a Comment
Note: Only a member of this blog may post a comment.